2015-03-31 67 views
0

我有包含名爲TestNameTestValue的列的數據。未在可視化組合圖中繪製的線

有了這個,我想繪製一個Combo-chart,這樣就可以呈現條和Line。

Link to Combo Charts of Google

然而,在我而言,它要麼代表棒或線。

var options = { 
        title: 'TestType v/s TestValue on ComboChart', 
        vAxis: {title: 'TestValue', titleTextStyle: {color: 'red'}}, 
        hAxis: {title: 'TestType', titleTextStyle: {color: 'blue'}}, 
        seriesType: "bars", 
        series: {0: {type: "line"}}, 
        width:600, 
        height:400 
       }; 

當我對系列0價值,它使得只有酒吧:

其計算方法如下:

enter image description here

我不知道對系列這個數字的意義。我真正想要的是在同一張圖上有條和相應的行。

編輯:我意識到組合圖表只有在最少2個系列的情況下才能以這種方式工作。有沒有一種替代方案來組合圖表而不會強制使用多個系列?

+0

既然你只有一個系列的唯一有效的索引是'0'。 如果您要求提供一個既作爲線條又作爲酒吧呈現的單個系列,我認爲不能這樣做。你必須用相同的數據創建第二個系列,並將其中一個設置爲「bars」,另一個設置爲「line」。 – drs9222 2015-04-26 15:25:28

回答

0

使用視圖可以重複使用同一列。

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ["TestType", "TestValue"], 
 
     ["BP", 120], 
 
     ["Temperature", 100], 
 
     ["Cholestrol", 80], 
 
     ["Cavity", 1] 
 
    ]); 
 
    
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0,1,1]); 
 

 
    var options = { 
 

 
     title: 'TestType v/s TestValue on ComboChart', 
 
     vAxis: { 
 
      title: 'TestValue', 
 
      titleTextStyle: { 
 
       color: 'red' 
 
      } 
 
     }, 
 
     hAxis: { 
 
      title: 'TestType', 
 
      titleTextStyle: { 
 
       color: 'blue' 
 
      } 
 
     }, 
 
     seriesType: "bars", 
 
     series: { 
 
      0: { 
 
       type: "line", 
 
       color: "blue" 
 
      },    
 
      1: { 
 
       color: "blue", 
 
       visibleInLegend: false 
 
      } 
 
     }, 
 
     width: 600, 
 
     height: 400 
 
    } 
 

 

 
    var chart = new google.visualization.ComboChart(document.getElementById("chart")); 
 
    chart.draw(view, options); 
 
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart" style="width: 900px; height: 300px;"></div>