<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>line chart</title>
  <style media="screen">
    *{padding: 0; margin: 0;}
    .div1{width: 80%; height: 500px; border: 1px solid #DDD;}
    .div2{width: 50%; height: 300px; border: 1px solid #DDD;}
  </style>
  <link rel="stylesheet" href="../../css/d3.css">
  <script type="text/javascript">
    window.onload = function() {
      var ops1 = {
        scale: 'time',
        data: [
          [
            {key: new Date(2001, 0, 1).getTime(), value: 0},
            {key: new Date(2002, 0, 1).getTime(), value: 12},
            {key: new Date(2003, 0, 1).getTime(), value: 4},
            {key: new Date(2005, 0, 1).getTime(), value: 22},
            {key: new Date(2008, 0, 1).getTime(), value: 6}
          ],
          [
            {key: new Date(2003, 0, 1).getTime(), value: 0},
            {key: new Date(2004, 0, 1).getTime(), value: 3},
            {key: new Date(2005, 0, 1).getTime(), value: 55},
            {key: new Date(2006, 0, 1).getTime(), value: 16},
            {key: new Date(2020, 0, 1).getTime(), value: 8}
          ]
        ],
        margin: {top: 20, right: 20, bottom: 50, left: 50},
        ticks: 5,
        showLineX: true,
        showLineY: true,
        axisTextX: '我是x轴',
        axisTextY: '我是y轴',
        showDot: true,
        tension: 0.5,
        // color: ['yellow', 'red', 'orange', 'blue', 'green']
      };
      var ops2 = {
        scale: 'linear',
        data: [
          [
            {key: '0', value: 0},
            {key: '1', value: 12},
            {key: '2', value: 4},
            {key: '3', value: 22},
            {key: '4', value: 6}
          ],
          [
            {key: '0', value: 12},
            {key: '1', value: 132},
            {key: '2', value: 24},
            {key: '3', value: 32},
            {key: '4', value: 16}
          ]

        ],
        margin: {top: 20, right: 20, bottom: 20, left: 100},
        ticks: 3,
        // showLineX: false,
        showLineY: true,
        showDot: true,
        tension: 0.5,
        // color: ['yellow', 'red', 'orange', 'blue', 'green']
      };

      dcharts.lineChart('.div1', ops1);
      dcharts.lineChart('.div2', ops2);

      window.onresize = function() {
          dcharts.lineChart('.div1', ops1);
          dcharts.lineChart('.div2', ops2);
      };
    };
  </script>
</head>
<body>
  <div class="div1"></div>
  <div class="div2"></div>



  <script type="text/javascript" src="../../node_modules/d3/d3.js"></script>
  <script type="text/javascript" src="../../node_modules/crossfilter/crossfilter.js"></script>
  <script type="text/javascript" src="../../lib/dcharts.js"></script>
</body>
</html>
