更新已实例化的图表的数据

Updating data of charts already instantiated

本文关键字：数据 更新 实例化      更新时间：2023-09-26

我正在使用谷歌图表，我需要更新一张地图，当您单击刷新按钮时，我需要更新一张地图，该地图是值得实际想要的地图。

今天我通过以下方式做：

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

该怎么做更新，就在我点击按钮的时候。请记住，我的"ataGraf"具有带有新值的数组。

我

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

first...
每次页面加载
只能调用一次google.charts.load和setOnLoadCallback您还可以在load语句中包含callback

接下来，通过保存对原始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>

相关文章：