谷歌图表转换动画:如何在重新绘制图表时更改轴标签

Google Charts Transition Animation: How to change axis labels upon redrawing the chart?

本文关键字：绘制 标签 动画 转换 谷歌 新绘制      更新时间：2023-09-26

使用谷歌图表转换动画，我创建了一个图表，点击图表下方的按钮即可重新绘制（完整的功能代码可以在下面找到）。单击按钮后，图表将显示新值和新标题。

我使用以下代码更改函数drawChart中的标题：

options['title'] = 'Monthly ' + (current ? 'Test A' : 'Test B') + ' Production by Country';

现在我的问题是：我还想在单击按钮时更改横轴的标题。如果没有按钮（在静态版本中），可以通过在选项中添加以下代码来实现：

hAxis: {title: 'Axis Title'}

然而，当我将以下代码添加到我的函数中（在上面显示的标题调整后面）时，没有任何变化：

options['hAxis.title'] = 'Title ' + (current ? 'Test A' : 'Test B');

有人知道我需要如何更改上面的代码才能更改轴标题吗？

这是我的完整代码：

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data1 = google.visualization.arrayToDataTable([
      ['Mon', 20, 28, 38, 45],
      ['Tue', 31, 38, 55, 66],
      ['Wed', 50, 55, 77, 80]
      // Treat first row as data as well.
    ], true);
    var data2 = google.visualization.arrayToDataTable([
      ['Mon', 23, 23, 39, 42],
      ['Tue', 34, 34, 59, 64],
      ['Wed', 55, 52, 79, 80]
      // Treat first row as data as well.
    ], true);
    // Create and populate the data tables.
    var data = [];
    data[0] = data1;
    data[1] = data2;
    var options = {
      legend:'none'
    };
    var current = 0;
    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Test A' : 'Test B');
          });
      options['title'] = 'Monthly ' + (current ? 'Test A' : 'Test B') + ' Production by Country';
      chart.draw(data[current], options);
    }
    drawChart();
    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }
}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <input type="button" value="Next day" id="b1" />
  </body>
</html>

非常感谢！！

我发现最简单的方法是首先在选项中定义hAxis：

var选项={hAxis:｛title:"Axis title"｝，图例：'none'}；

然后在addListener函数下面添加这行代码：

options.hAxis.title=（当前？"测试A"："测试B"）
相关文章：