Google图表库中的组合图表

时间:2015-03-31 08:06:30

标签: google-visualization

我正在尝试使用ComboCharts。

options变量中,它在示例Here中针对5设置值series。这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.它只更改了该行的位置。 它与图表中的线位置有什么关系?

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;