2015-03-31 77 views
0

我正在嘗試使用ComboCharts。Google圖表庫中的組合圖表

在它的options變量中,它在示例Here中設置值5series。這5個字是什麼意思?

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

編輯:我現在意識到,這5是每個值的值類型上vAxis

雖然我嘗試,改變50,1,2,3 or 4.它不僅改變了線的位置。 它與圖表中行的位置有什麼關係?

回答

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>