admin
/
movie


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../css/c3.css">
  </head>
  <body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>

    <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
    <script src="../js/c3.js"></script>
    <script>

      var chart1 = c3.generate({
        bindto: '#chart1',
        data: {
          columns: [
            ['data1', 100, 200, 50, 300, 400, 290],
            ['data2', 10, 20, 50, 30, 10, 100],
          ],
        },
        axis: {
          x: {
            selection: [2, 4.5]
          }
        },
        subchart: {
          show: true
        }
      });

      var chart2 = c3.generate({
        bindto: '#chart2',
        data: {
          x: 'x',
          columns: [
            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
            ['data1', 100, 200, 50, 300, 400, 290],
            ['data2', 10, 20, 50, 30, 10, 100],
          ],
        },
        axis: {
          x: {
            type: 'timeseries',
            selection: ['2014-03-01', '2014-04-20']
          }
        },
        subchart: {
          show: true
        }
      });

      var chart3 = c3.generate({
        bindto: '#chart3',
        data: {
          columns: [
            ['data1', 100, 200, 50, 300, 400, 290],
            ['data2', 10, 20, 50, 30, 10, 100],
          ],
        },
        axis: {
          x: {
            selection: [1, 4.2]
          }
        },
        zoom: {
          enabled: true
        },
        subchart: {
          show: true
        }
      });

    </script>
  </body>
</html>