来自谷歌图表库的组合图表答案

【问题标题】：Combo Chart from Google Charts Library来自谷歌图表库的组合图表
【发布时间】：2015-04-26 22:49:01
【问题描述】：

我正在尝试使用 ComboCharts 。

在其options 变量中，它针对series 设置一个值5，例如Here。这个5是什么意思？

 var options = {
    title : 'Monthly Coffee Production by Country',
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
      series: {5: {type: "line"}}
  };

编辑：我现在意识到 5 是 vAxis 上每个值的值类型

在我进行实验时，将5 更改为0,1,2,3 or 4. 它只改变了线条的位置。它与图表中线的位置有什么关系？

【问题讨论】：

标签： google-visualization

【解决方案1】：

您要更改其属性的数据中序列的从零开始的索引的数字。您选项中的seriesType: "bars" 部分表示您的所有系列都将默认呈现为条形。

当您专门调出这样的系列时，您将覆盖默认值。在这种情况下，您是说第 5 列应该呈现为一行。

看看这个例子，看看系列和数据之间的关系。

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["X", "C1", "C2", "C3", "C4", "C5"],
        ["A", 1, 2, 3, 4, 5],
        ["B", 2, 5, 1, 7, 9],
        ["C", 6, 2, 4, 1, 8],
        ["D", 7, 1, 2, 3, 6]
    ]);


    var options = {
        seriesType: "bars",
        series: {
            // Make the first column (C1) a blue bar (bar because it is the default)
            0: {
                color: "blue"
            },
            // Make the fourth column (C4) a green line (line because we overrode the default)
            3: {
                type: "line",
                color: "green"
            }
        }
    };
    
    var chart = new google.visualization.ComboChart(document.getElementById("chart"));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>

【讨论】：