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

Question

我在Google图表中包含了多个图表。 我想一次显示一张图表，但允许用户在多个csv输入文件之间切换。 输入数据的更改还需要更改图表和轴标题。 我是Java语言的新手，我不确定如何做到这一点。

这是我目前正在绘制一个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>

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

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