3

我需要制作使用相同数据的图表并显示折线图和面积图。如何合成折线图和面积图。这是数据 ['Year', 'Sales', 'Expenses','Total'], ['2004', 1000, 400,600], ['2005', 1100, 200,900], ['2006', 6000, 5000 ,1000], ['2007', 1000, 500,500]

我需要销售和费用折线图和总面积图。

4

1 回答 1

4

您可以使用组合图。这些是一个图表，可让您将每个系列呈现为以下列表中的不同标记类型：线、区域、条形图、烛台和阶梯区域。

要为系列分配默认标记类型，请指定 seriesType 属性。使用系列属性单独指定每个系列的属性。

链接中有一个您可以编辑的示例。您曾经能够制作复合图表，但遗憾的是这些现在已被弃用。

面积和线的例子：

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Total'],
          ['2004',  1000,      400,       600 ],
          ['2005',  1100,      200,       900 ],
          ['2006',  6000,      5000,      1000],
          ['2007',  1000,      500,       500 ],
        ]);

        // Create and draw the visualization.
        var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
        ac.draw(data, {
          title : 'Sales & Expenses by Year',
          width: 600,
          height: 400,
          vAxis: {title: "Sales"},
          hAxis: {title: "Year"},
          seriesType: "area",
          series: {5: {type: "line"}}
        });
      }



      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

印刷

销售和费用

于 2013-05-23T08:00:16.977 回答