Question

我需要制作使用相同数据的图表并显示折线图和面积图。如何复合线和面积图。这是数据 ['年'，'销售'，'费用'，'总计']， ['2004'，1000,400,600]， ['2005'，1100,200,900]， ['2006'，6000,5000,1000]， ['2007'，1000,500,500]

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

Answer 1

您可以使用combo chart。这些是A图表，可让您将每个系列渲染为以下列表中的不同标记类型：线条，区域，条形，烛台和阶梯区域。

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

您可以修改链接中的example。您曾经能够做compound chart但现在已经遗憾地弃用了这些。

区域和线的例子：

 <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>

打印

Sales and Expenses

如何在同一图表中整合线和区域谷歌图表

1 个答案: