2016-01-06 73 views
0

正如標題所示,我想顯示一個Google Chart,省略我的數據表的一列。我的表具有以下結構:在Google圖表中省略一列

['2016-01-05 12:45:05', 1.187, 20.375, 45.375], 
['2016-01-05 13:00:04', 1.687, 21.437, 43.937], 
['2016-01-05 13:15:04', 2.062, 22.062, 43.25], 

有四列,但我只想顯示圖表中的第一列,第三列和第四列。

我的谷歌圖的片段看起來是這樣的:

def print_graph_script(table): 

# google chart snippet 
chart_code=""" 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ['Time', 'Temp1', 'Temp2', 'Temp3'], %s ]); 

     var options = { 
      animation:{"startup": true, duration: 1500, easing: 'out', }, 
      title: 'Temperature', 
      showAxisLines:true, 
      hAxis: { 
       title: '', 
       slantedText:true, 
       slantedTextAngle:90, 
       textStyle: {fontSize: '12'} 
       }, 
      vAxis: { 
       title: '', 
       textStyle: {fontSize: '12'} 
       }, 
      series: { 
       0: { color: '#333333' }, 
       1: { color: '#75baff' }, 
       2: { color: '#eba314' }, 
       } 
     }; 

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 
</script>""" 

print chart_code % (table) 

任何想法?在此先感謝

+0

你可以嘗試[的DataView類(https://developers.google創建圖。 com/chart/interactive/docs/reference#dataview-class) - 然後使用'hideColumns' – WhiteHat

+0

謝謝你的提示。但是這個方法會拋出一個錯誤。也許我做錯了什麼。這是我做的:'var view = new google.visualization.DataView(data); view.setColumns([0,2,3]);'但是,這給了我'無效的列索引3.應該是一個整數範圍[0-2] .' –

回答

0

我不知道爲什麼,買使用兩種觀點似乎工作。
我確實收到了與使用只有一個視圖的註釋相同的錯誤。
在這裏,我創建視圖,隱藏的列,然後從圖1

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Time', 'Col 1', 'Col 2', 'Col 3'], 
 
     ['2016-01-05 12:45:05', 1.187, 20.375, 45.375], 
 
     ['2016-01-05 13:00:04', 1.687, 21.437, 43.937], 
 
     ['2016-01-05 13:15:04', 2.062, 22.062, 43.25], 
 
    ]); 
 

 
    var dataView1 = new google.visualization.DataView(data); 
 
    dataView1.hideColumns([1]); 
 
    var dataView2 = new google.visualization.DataView(dataView1); 
 

 
    var options = { 
 
     animation: { 
 
      startup: true, 
 
      duration: 1500, 
 
      easing: 'out' 
 
     }, 
 
     title: 'Temperature', 
 
     showAxisLines: true, 
 
     hAxis: { 
 
      title: '', 
 
      slantedText:true, 
 
      slantedTextAngle:90, 
 
      textStyle: {fontSize: '12'} 
 
     }, 
 
     vAxis: { 
 
      title: '', 
 
      textStyle: {fontSize: '12'} 
 
     }, 
 
     series: { 
 
      0: { color: '#333333' }, 
 
      1: { color: '#75baff' }, 
 
      2: { color: '#eba314' }, 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); 
 
    chart.draw(dataView2, options); 
 
}
<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>

+0

希望這可以幫助... – WhiteHat

+0

這工作正常,只是我的預期是。有點奇怪,你必須創建兩個視圖才能得到結果,但是它可行。非常感謝 –

0

爲什麼不直接過濾表像

table_filtered = [ [row[0], row[2], row[3]] for row in table] 

,並通過table_filtered到打印

+0

也許數據仍然需要在瀏覽器中的一些其他目的?我不得不隱藏圖表中的數據,但仍需要其他功能。 – nbering