Javascript 如何使用Google图表在两个输入文件/数组之间切换？

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

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

在页眉中创建的脚本

  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>

---

您可以通过将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);
}

---

我所做的就是创建一个chartData对象，您可以在其中定义任何特定于图表的变量。我只做了标题和数据，但很明显，你可以做你想做的任何图表选项。然后，当您想重画图表时，您可以用新图表的数据覆盖chartData对象，并用新数据再次调用drawChart。

有什么原因不能将新数据集分配给数据对象并重画图表吗？这就是我想做的。不过，我不确定如何根据用户输入来实现这一点。理想情况下，我希望将文件名和图表标题设置为变量，并根据用户按钮的按下进行更改。我甚至很乐意走一条低效的路线，对一堆单独的图形进行编码，然后一次只显示一个，根据用户按钮的按下进行切换。不过我不知道该怎么做。