Google Charts Transition Animation：如何在重绘图表时更改轴标签？

Question

Using Google Charts Transition Animation , I have created a chart that can be redrawn upon clicking on the button below the chart (the full functioning code can be found below). 使用Google Charts Transition Animation ，我创建了一个图表，单击该图表下方的按钮即可重新绘制该图表（可以在下面找到完整的功能代码）。 Once the button is clicked, the chart displays new values and a new title. 单击按钮后，图表将显示新值和新标题。

I change the title in the function drawChart using the following piece of code: 我使用以下代码在drawChart函数中更改标题：

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

Now to my problem: I would also like to change the title of the horizontal axis upon clicking on the button. 现在是我的问题：单击按钮后，我还想更改水平轴的标题。 Without a button (in a static version), this can be achieved by adding the following code to the options: 如果没有按钮（在静态版本中），可以通过在选项中添加以下代码来实现：

hAxis: {title: 'Axis Title'}

When I add the following piece of code to my function (behind the title adjustment shown above), however, nothing changes: 但是，当我在函数中添加以下代码（在上面显示的标题调整之后）时，什么都没有改变：

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

Does anyone know how I need to change the code above to get the axis title to change? 有谁知道我需要如何更改上面的代码才能更改轴标题？

Here is my complete code: 这是我完整的代码：

<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>

Thanks a lot!! 非常感谢！！

Answer 1

The easiest way I found to do it is first define hAxis in options: 我发现最简单的方法是先在选项中定义hAxis ：

var options = {
 hAxis: {title: "Axis Title"},      
 legend:'none'    
};

And then you add this line of code below your addListener function: 然后将以下代码行添加到addListener函数下面：

options.hAxis.title = (current ? 'Test A' : 'Test B')

Google Charts Transition Animation：如何在重绘图表时更改轴标签？

问题描述

1 个解决方案

解决方案1
0 2015-05-04 21:52:31

Google Charts Transition Animation：如何在重绘图表时更改轴标签？

问题描述

1 个解决方案

解决方案1 0 2015-05-04 21:52:31

解决方案1
0 2015-05-04 21:52:31