javascript - Google Chart - 定制 View - 列索引 0-4

Question

为了减少从数据库中提取的次数，我一次提取所有数据，然后针对更多图表使用不同的 View 对其进行定制。在这种情况下，我有包含十列(从 0 到 9)的数据表，并且想要将列 0 显示为 X 轴，将列 1 显示为 AreaChart，将另外两列显示为组合图上的线。如果我选择最多 4 列，一切都有效。如果我采取例如带有 view.setColumns 的第 7 列 Google 给出错误消息 “无效的列索引 7。应该是 [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>

Answer 1

在 animation.startup: true 中使用 DataView 时出现错误

一个简单的修复，同时在启动时保持动画，
就是将 View 转换回数据表 --> 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>