2017-08-07 59 views
2

爲了減少從數據庫中提取的數量,我一次獲取所有數據,然後使用不同視圖爲其定製更多圖表。在這種情況下,我有10列的數據表(從0到9),並希望顯示列0作爲X軸,1作爲AreaChart和另外兩列作爲組合圖上的行。如果我取4列的話,Everithing會奏效。第7列與view.setColumns Google給出錯誤信息"Invalid column index 7. Should be an integer in the range [0-4]."爲什麼索引只有0-4 !!! ???谷歌圖表 - 剪裁視圖 - 列索引0-4

這是它的樣子:

google.charts.load('current',{callback:init,'packages':['corechart'],'language':'hr'}); 
 
    
 
    function init() 
 
    { 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('date','Datum'); 
 
     data.addColumn('number','Vrijednost'); 
 
     data.addColumn('number','Relativna promjena'); 
 
     data.addColumn('number','Kontinuiranost promjene'); 
 
     data.addColumn('number','Prosjek obični u preth. 5 dana'); 
 
     data.addColumn('number','Prosjek težinski u preth. 5 dana'); 
 
     data.addColumn('number','Trend prema preth. 5 dana'); 
 
     data.addColumn('number','Prosjek obični u preth. 10 dana'); 
 
     data.addColumn('number','Prosjek težinski u preth. 10 dana'); 
 
     data.addColumn('number','Trend prema preth. 10 dana'); 
 
     data.addRows([ 
 
[new Date('2017-07-07'),11.92850,-0.13,-1,-3,-2.33333,11.96977,-5.5,-4,11.93431], 
 
[new Date('2017-07-10'),11.94040,0.1,0,-3,-2.33333,11.9698,-5.5,-4,11.93224], 
 
[new Date('2017-07-11'),11.96360,0.19,1,-3,-2.33333,11.95871,-5.5,-4,11.94423], 
 
[new Date('2017-07-12'),11.95520,-0.07,0,-3,-2.33333,11.94968,-5.5,-4,11.96142], 
 
[new Date('2017-07-13'),11.93310,-0.18,-1,-3,-2.33333,11.96335,-5.5,-4,11.97571], 
 
[new Date('2017-07-14'),11.94130,0.07,0,-3,-2.33333,11.95136,-5.5,-4,11.97237], 
 
[new Date('2017-07-17'),11.89760,-0.37,-1,-3,-2.33333,11.93811,-5.5,-4,11.96705], 
 
[new Date('2017-07-18'),11.91230,0.12,0,-3,-2.33333,11.89439,-5.5,-4,11.93777], 
 
[new Date('2017-07-19'),11.93750,0.21,1,-3,-2.33333,11.89151,-5.5,-4,11.91419], 
 
[new Date('2017-07-20'),11.96080,0.2,2,-3,-2.33333,11.9183,-5.5,-4,11.9194], 
 
[new Date('2017-07-21'),12.01040,0.41,3,-3,-2.33333,11.95357,-5.5,-4,11.93201], 
 
[new Date('2017-07-24'),12.03320,0.19,4,-3,-2.33333,12.02595,-5.5,-4,11.95908], 
 
[new Date('2017-07-25'),12.06780,0.29,5,-3,-2.33333,12.06525,-5.5,-4,11.99299], 
 
[new Date('2017-07-26'),12.06780,0,5,-3,-2.33333,12.10184,-5.5,-4,12.04073], 
 
[new Date('2017-07-27'),12.09690,0.24,6,-3,-2.33333,12.10942,-5.5,-4,12.07929], 
 
[new Date('2017-07-28'),12.11120,0.12,7,-3,-2.33333,12.1175,-5.5,-4,12.11609], 
 
[new Date('2017-07-31'),12.11100,-0,0,-3,-2.33333,12.13091,-5.5,-4,12.14988], 
 
[new Date('2017-08-01'),12.14890,0.31,1,-3,-2.33333,12.12988,-5.5,-4,12.16061], 
 
[new Date('2017-08-02'),12.06400,-0.7,0,-3,-2.33333,12.16005,-5.5,-4,12.17619], 
 
[new Date('2017-08-03'),12.10260,0.32,1,-3,-2.33333,12.09797,-5.5,-4,12.14875]]); 
 

 
     var ComboOpt = { 
 
     height: 400, 
 
     annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}, highContrast: true}, 
 
     animation:{ duration: 500, easing: 'out', startup: true }, 
 
     vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}}, 
 
     hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, gridlines: {count: 30}, showTextEvery: 7}, 
 
     chartArea: {width: '80%', height: '80%'}, 
 
     legend: {position: 'bottom'}, 
 
     series: {0: {type: 'area', color: "blue", pointsVisible: true}, 
 
       1: {type: 'line'}, 
 
       2: {type: 'line'}} 
 
     }; 
 
     
 
     var view1a = new google.visualization.DataView(data); 
 
     view1a.setColumns([0,1,{sourceColumn:1,role:'annotation'},3,4]); 
 
     var chart1a = new google.visualization.ComboChart(document.getElementById('Chart1a'));  
 
     chart1a.draw(view1a,ComboOpt); 
 
    }
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<div id="Chart1a"></div>

回答

1

存在使用DataViewanimation.startup: true

一個容易解決的時候了bug,同時保持動畫在啓動時,
是將視圖轉換回數據表 - >view1a.toDataTable()
,在繪製圖表時做...

chart1a.draw(view1a.toDataTable(),ComboOpt); 

見下工作片斷......

google.charts.load('current',{callback:init,'packages':['corechart'],'language':'hr'}); 
 
    
 
    function init() 
 
    { 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('date','Datum'); 
 
     data.addColumn('number','Vrijednost'); 
 
     data.addColumn('number','Relativna promjena'); 
 
     data.addColumn('number','Kontinuiranost promjene'); 
 
     data.addColumn('number','Prosjek obični u preth. 5 dana'); 
 
     data.addColumn('number','Prosjek težinski u preth. 5 dana'); 
 
     data.addColumn('number','Trend prema preth. 5 dana'); 
 
     data.addColumn('number','Prosjek obični u preth. 10 dana'); 
 
     data.addColumn('number','Prosjek težinski u preth. 10 dana'); 
 
     data.addColumn('number','Trend prema preth. 10 dana'); 
 
     data.addRows([ 
 
[new Date('2017-07-07'),11.92850,-0.13,-1,-3,-2.33333,11.96977,-5.5,-4,11.93431], 
 
[new Date('2017-07-10'),11.94040,0.1,0,-3,-2.33333,11.9698,-5.5,-4,11.93224], 
 
[new Date('2017-07-11'),11.96360,0.19,1,-3,-2.33333,11.95871,-5.5,-4,11.94423], 
 
[new Date('2017-07-12'),11.95520,-0.07,0,-3,-2.33333,11.94968,-5.5,-4,11.96142], 
 
[new Date('2017-07-13'),11.93310,-0.18,-1,-3,-2.33333,11.96335,-5.5,-4,11.97571], 
 
[new Date('2017-07-14'),11.94130,0.07,0,-3,-2.33333,11.95136,-5.5,-4,11.97237], 
 
[new Date('2017-07-17'),11.89760,-0.37,-1,-3,-2.33333,11.93811,-5.5,-4,11.96705], 
 
[new Date('2017-07-18'),11.91230,0.12,0,-3,-2.33333,11.89439,-5.5,-4,11.93777], 
 
[new Date('2017-07-19'),11.93750,0.21,1,-3,-2.33333,11.89151,-5.5,-4,11.91419], 
 
[new Date('2017-07-20'),11.96080,0.2,2,-3,-2.33333,11.9183,-5.5,-4,11.9194], 
 
[new Date('2017-07-21'),12.01040,0.41,3,-3,-2.33333,11.95357,-5.5,-4,11.93201], 
 
[new Date('2017-07-24'),12.03320,0.19,4,-3,-2.33333,12.02595,-5.5,-4,11.95908], 
 
[new Date('2017-07-25'),12.06780,0.29,5,-3,-2.33333,12.06525,-5.5,-4,11.99299], 
 
[new Date('2017-07-26'),12.06780,0,5,-3,-2.33333,12.10184,-5.5,-4,12.04073], 
 
[new Date('2017-07-27'),12.09690,0.24,6,-3,-2.33333,12.10942,-5.5,-4,12.07929], 
 
[new Date('2017-07-28'),12.11120,0.12,7,-3,-2.33333,12.1175,-5.5,-4,12.11609], 
 
[new Date('2017-07-31'),12.11100,-0,0,-3,-2.33333,12.13091,-5.5,-4,12.14988], 
 
[new Date('2017-08-01'),12.14890,0.31,1,-3,-2.33333,12.12988,-5.5,-4,12.16061], 
 
[new Date('2017-08-02'),12.06400,-0.7,0,-3,-2.33333,12.16005,-5.5,-4,12.17619], 
 
[new Date('2017-08-03'),12.10260,0.32,1,-3,-2.33333,12.09797,-5.5,-4,12.14875]]); 
 

 
     var ComboOpt = { 
 
     height: 400, 
 
     annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}, highContrast: true}, 
 
     animation:{ duration: 500, easing: 'out', startup: true }, 
 
     vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}}, 
 
     hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, gridlines: {count: 30}, showTextEvery: 7}, 
 
     chartArea: {width: '80%', height: '80%'}, 
 
     legend: {position: 'bottom'}, 
 
     series: {0: {type: 'area', color: "blue", pointsVisible: true}, 
 
       1: {type: 'line'}, 
 
       2: {type: 'line'}} 
 
     }; 
 
     
 
     var view1a = new google.visualization.DataView(data); 
 
     view1a.setColumns([0,1,{sourceColumn:1,role:'annotation'},3,7]); 
 
     var chart1a = new google.visualization.ComboChart(document.getElementById('Chart1a'));  
 
     chart1a.draw(view1a.toDataTable(),ComboOpt); 
 
    }
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 

 
<div id="Chart1a"></div>