Google visualization 谷歌图表-阅读特定列

我有一个20列的大CSV文件

在一个单独的语句中，我希望能够让图表1从第1列到第10列获取值，让图表2从第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);     
     });
  }

---

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

options

在下面的片段中，

视图

是为

图表

创建的
--和--

view2

是为

chart2

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']
});

---

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

options

在下面的片段中，

视图

是为

图表

创建的
--和--

view2

是为

chart2

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']
});

---

嗨，是的，我决定改用动态图库。这是一行代码更改，以使其能够读取某些列：）-也感谢您的输入。由于某些原因，当有人回复时，堆栈溢出不会给我任何通知！嗨，是的，我决定改用动态图库。这是一行代码更改，以使其能够读取某些列：）-也感谢您的输入。由于某些原因，当有人回复时，堆栈溢出不会给我任何通知！