Question

我正在使用Google Charts，我需要更新一个已经实例化为地图的地图，当你点击地图中的数据刷新按钮时，实际上需要这个地图。

今天我的做法如下：

var dataGraf = google.visualization.arrayToDataTable(parsVal);
var chart = document.getElementById('curve_chart');
chart.draw(dataGraf);

但没有任何反应。为了实例化我的地图，我使用了以下命令：

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

function drawChart() {
  var data = google.visualization.arrayToDataTable(parsVal);
  var options = {
    title: 'Membros x Visitantes',
    curveType: 'function',
    legend: { position: 'bottom' }
  };
 var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
 chart.draw(data, options);
}

当我点击按钮时，如何进行更新。记住我的＆＃39; ataGraf＆＃39;我的数组有新值。

我做了一个JsFiddle来说明我的问题。

Answer 1

...第一
google.charts.load＆amp; setOnLoadCallback只应在每页加载时调用一次您还可以在callback声明

中加入load

接下来，通过保存对原始chart的引用，您可以将一个数据集设置为另一个数据集

点击按钮，创建data并致电draw

还建议不直接在html标记中添加事件处理程序

请参阅以下工作片段，每个按钮点击数据“交换”...

google.charts.load('current', {
  callback: function () {
    // draw first chart
    var data = google.visualization.arrayToDataTable([
      ['Data', 'Membros', 'Visitantes'],
      ['1', 4, 6],
      ['2', 5, 7]
    ]);

    var options = {
      animation: {
        startup: true,
        duration: 1200,
        easing: 'linear'
      },
      title: 'Membros x Visitantes',
      curveType: 'function',
      legend: { position: 'bottom' }
    };

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(data, options);

    // draw same chart with new data on button click
    var newData = null;
    document.getElementById('chart_button').addEventListener('click', drawNewChart, false);
    function drawNewChart() {
      // switch between newData and data on each click
      if (newData === null) {
        newData = google.visualization.arrayToDataTable([
          ['Data', 'Membros', 'Visitantes'],
          ['1', 9, 2],
          ['2', 1, 7]
        ]);
        chart.draw(newData, options);
      } else {
        chart.draw(data, options);
        newData = null;
      }
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<button id="chart_button">Atualizar gráficos</button>
<div id="curve_chart"></div>

更新已实例化的图表数据

1 个答案: