2

我正在使用 jquery 为移动设备开发网站。我必须使用 Bar、pie、line 等图表，因为这是通过 Javascript 实现的。我已经导入了我需要的所有图表。但我必须将这些图表在一条垂直线上一一对齐。所以请帮助我实现这一目标。以下是我的代码。我也摆弄过它，但我没有得到完整的输出。http://jsfiddle.net/2VPUX/1/

<!doctype html> 

<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v2.js"></script> 
<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script> 
Bar Graph 
<div id="chart"></div> 
<script> 
    var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 400,
    height: 850,
    renderer: 'bar',
    series: [ {
    data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 },   { x: 4, y: 32 } ],
        color: 'Black'
    } ]
    } );
    graph.render();
    </script> 

    <div id="chart" align="left"></div>
    <script> 
      var graph = new Rickshaw.Graph({
      element: document.querySelector("#chart"),
      width: 400,
      height: 850,
      renderer: 'line',
      series: [{
      data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 },  { x: 4, y: 32 } ],
          color: 'Red'
      }, {
      data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 37 }, { x: 3, y: 15 },  { x: 4, y: 16 } ],
      color: 'Black'
}]
  });
     graph.render();
    </script> 

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Vehicle Sales', 'Per Year'],
      ['Cars',     15],
      ['Bus',      12],
      ['Lorry',  10],
      ['Two Wheeler', 45],
      ['Others',    18]
    ]);

    var options = {
      title: 'Pie Chart'
    };

    var chart = new  google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
   </script>
  </head>
 <body>
   <div id="chart_div" align="left" style="width: 900px; height: 600px; float: left">     </div>
  </body>
   <div id="chart" align="left"></div> 
   <script> 
      var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 435,
height: 200,
renderer: 'area',
stroke: true,
series: [ {
    data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
    color: 'Maroon'
} ]
  } );
     graph.render();

    </script> 
      <div id="chart"></div> 
     <script> 
      var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 1000,
height: 85,
renderer: 'scatterplot',
stroke: true,
padding: { top: 0.05, left: 0.05, right: 0.05 },
series: [ {
    data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }, { x: 5, y: 40 }, { x: 6, y: 49 }, { x: 7, y: 38 }, { x: 8, y: 30 }, { x: 9, y: 32}  ],
    color: 'Black'
} ]
 } );
   graph.render();

   </script>
4

1 回答 1

0

我必须将这些图表在一条垂直线上一一对齐

#container { display: block; }
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<rect x="25" y="15" height="15" width="15" style="fill:red;"/>
<rect x="25" y="45" height="15" width="15" style="fill:black;"/>
<rect x="25" y="75" height="15" width="15" style="fill:green;"/>
</svg>

于 2013-12-05T02:34:54.810 回答