如何在同一图表中集成折线和面积谷歌图表答案

【问题标题】：How to integrate line and area google chart in same chart如何在同一图表中集成折线和面积谷歌图表
【发布时间】：2013-05-18 09:48:15
【问题描述】：

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

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

【问题讨论】：

查看 stackoverflow.com/questions/10333030/… 以了解显示/隐藏
这个stackoverflow.com/questions/22761836/…可能对某人有用

标签： charts line composite area

【解决方案1】：

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

要为系列分配默认标记类型，请指定 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>

打印

【讨论】：