javascript - 如何使用 Google Charts 在两个输入文件/数组之间切换？

Question

我在 Google 图表中添加了多个图表。我想一次显示一个图表，但允许用户在多个 csv 输入文件之间切换。输入数据的更改还需要更改图表和轴标题。我是 Javascript 新手，我不知道如何最好地做到这一点。

以下是我目前绘制一个 csv 的方式。任何有关如何切换输入文件中的更改的提示将不胜感激。我目前正在使用 jquery-csv 模块将 csv 文件读入数组。

在 header 中创建脚本。

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    // Reading in a locally stored CSV file to an array of numbers
    $.get("2017T.csv", function(csvString) {
    var dataarray = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});  

    // Turning array into format usable by Google Charts
    var data = google.visualization.arrayToDataTable(dataarray);

    // Formatting Google Charts
    var options = {
      title: 'Raspberry PI Temperature plot - Yearly',
      titleTextStyle: {
        fontSize: '18',
        },
      vAxis: { 
        title: 'Temperature (\u00B0 C)' ,
        titleTextStyle: {
            italic: 'FALSE',
            fontSize: '14',
        },
        baseline: '0',
        baselineColor: 'black',
        gridlines: { color: 'transparent'},
        },
      hAxis: {
        title: 'Date',
        titleTextStyle: {
            italic: 'FALSE',
            fontSize: '14',
        },
        baseline: '0',
        baselineColor: 'black',
        gridlines: { color: 'transparent'},
        },
      curveType: 'function',
      backgroundColor: {
        stroke: 'black',
        strokeWidth: '5',
        },
      haxis: {
        title: 'Hello',
        },
      legend: {position: 'none'},
    };

    //Creating Charts
    var chart = new google.visualization.LineChart(document.getElementById('temp_year'));

    chart.draw(data, options);
    });
  }

正文中调用的图表。

<div id="temp_year" style="width: 800px; height: 400px"></div>

Answer 1

您可以通过使您的drawChart函数通用，然后在每次绘制时传入图表特定数据来实现此目的。这允许您使用新数据重新绘制，甚至使其也能处理动态数据。

例如，根据您的代码，您可能会执行以下操作:

var chartData = {};
var dataarray;

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(function () {
    drawChart(chartData);
});

// Reading in a locally stored CSV file to an array of numbers
$.get("2017T.csv", function (csvString) {
    dataarray = $.csv.toArrays(csvString, { onParseValue: $.csv.hooks.castToScalar });
});

// Turning array into format usable by Google Charts
var data = google.visualization.arrayToDataTable(dataarray);

chartData = {
    title: 'Raspberry PI Temperature plot - Yearly',
    data: data
}

function drawChart(chartData) {

    // Formatting Google Charts
    var options = {
        title: chartData.title,
        titleTextStyle: {
            fontSize: '18',
        },
        vAxis: {
            title: 'Temperature (\u00B0 C)',
            titleTextStyle: {
                italic: 'FALSE',
                fontSize: '14',
            },
            baseline: '0',
            baselineColor: 'black',
            gridlines: { color: 'transparent' },
        },
        hAxis: {
            title: 'Date',
            titleTextStyle: {
                italic: 'FALSE',
                fontSize: '14',
            },
            baseline: '0',
            baselineColor: 'black',
            gridlines: { color: 'transparent' },
        },
        curveType: 'function',
        backgroundColor: {
            stroke: 'black',
            strokeWidth: '5',
        },
        haxis: {
            title: 'Hello',
        },
        legend: { position: 'none' },
    };

    //Creating Charts
    var chart = new google.visualization.LineChart(document.getElementById('temp_year'));

    chart.draw(chartData.data, options);
}

所以我所做的是创建一个图表数据对象，您可以在其中定义任何图表特定变量。我只完成了标题和数据，但显然您可以根据需要执行任意数量的图表选项。然后，当您想要重新绘制图表时，您可以使用新图表的数据覆盖图表数据对象，并使用新数据再次调用drawChart。