Question

我有一个包含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);     
     });
  }

Answer 1

听起来你需要为每个图表单独查看，类似于options

在以下代码段中，
view为chart创建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']
});

String url = ...;  // your url
url = URLEncoder.encode(url,"UTF-8");
// Use 'url' ...

Google Charts - 阅读特定列

1 个答案: