图形可视化-谷歌图表-读取特定列

Question

我有一个包含20列的大CSV文件。

在一句话中，我希望能够使图表一从第1列到第10列取值，使图表二从第11列到第20列取值。

这样，我只读取CSV一次，这应该会加快加载时间。

目前，我有下面的代码，它为两个图表读取相同的列。

有人能建议我怎么做吗？

感谢

function FwThroughputStacked(){
     $.get("../CRX1/Overall_DAB_Fortinet_Throughput_Report.csv", function(csvString) {
        var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
        var data = new google.visualization.arrayToDataTable(arrayData);
        var view = new google.visualization.DataView(data);
        view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
      var options = {
        chartArea: {width: '80%', height: '75%'},
        explorer: {actions: ["dragToZoom", "rightClickToReset"]},
        isStacked: true,
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
        vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
        legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
      };
      var options2 = {
        chartArea: {width: '80%', height: '75%'},
        explorer: {actions: ["dragToZoom", "rightClickToReset"]},
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
        vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
        legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
      };
     var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
     chart.draw(view, options);
     var chart = new google.visualization.LineChart(document.getElementById('throughput'));
     chart.draw(view, options2);     
     });
  }

Answer 1

听起来每个图表都需要单独的视图，类似于options

在以下片段中，
为chart创建view
--和-
为chart2 创建view2

google.charts.load('current', {
  callback: function () {
    $.get("output.txt", function(csvString) {
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
      var data = new google.visualization.arrayToDataTable(arrayData);
      var view = new google.visualization.DataView(data);
      view.setColumns([0,1,2,3,4,5,6,7,8,9,10]);
      var view2 = new google.visualization.DataView(data);
      view2.setColumns([11,12,13,14,15,16,17,18,19]);
      var options = {
        chartArea: {width: '80%', height: '75%'},
        explorer: {actions: ["dragToZoom", "rightClickToReset"]},
        isStacked: true,
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
        vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
        legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
      };
      var options2 = {
        chartArea: {width: '80%', height: '75%'},
        explorer: {actions: ["dragToZoom", "rightClickToReset"]},
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max, textStyle: {fontSize: 9}},
        vAxis: {title: "Megabits/s", minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max, textStyle: {fontSize: 10}},
        legend: {position: 'top', maxLines: 10, textStyle: {fontSize: 9} },
      };
      var chart = new google.visualization.AreaChart(document.getElementById('throughputStacked'));
      chart.draw(view, options);
      var chart2 = new google.visualization.LineChart(document.getElementById('throughput'));
      chart2.draw(view2, options2);
    });
  },
  packages: ['corechart']
});