更改HighCharts轴标题

Question

能否在HighCharts图表中以编程方式更改坐标轴标题？

我正在尝试做类似于以下的事情：

charts.series[0].yAxis.title.text = 'new title';

或者

charts.yAxis[0].title.text = 'new title';

（在初始化图表时已经设置了标题）。

- Tomba

Answer 1

你可以使用以下方法来实现：

chart.yAxis[0].axisTitle.attr({
        text: '新标题'
    });

- escouser

---

+1，谢谢。这个有文档吗？我在官方文档中找不到。 - Bennett McElwee

这个工作没问题，但是当我们导出图表时，默认的“Value”文本没有改变？有人知道如何解决吗？ - Ishan Fernando

很酷，但我需要在Y轴mouseover（就像tooltip一样）时显示相同的文本，我该如何实现相同的效果。 - Rahul

Answer 2

现在可以直接在 Axis 对象上使用 setTitle 进行操作。例如：

chart.yAxis[0].setTitle({ text: "Bananas" });

请查看这个JSFiddle演示。该方法的签名为：

setTitle(Object title, [Boolean redraw])

所以，您可以选择传递布尔值来等待重绘。 title 对象使用与 xAxis.title 相同的参数，这意味着您可以传递样式和其他几个选项以及文本本身。 API 文档 包含完整信息。

- Halvor Holsten Strand

Answer 3

我试了上面两种方法都不行，可能是因为去年以来有些变化了...最后我使用了：

chart.yAxis[0].update({
                title:{
                    text: "new title"
                }
            });

而且它成功地运行了...

- msanteler

---

我可以确认只有这种方法有效。使用Highcharts 3.0.9。 - Eric Bridger

Answer 4

上述答案仍存在一个问题。使用导出模块创建的图像将显示原始标题，而不是更改后的标题。添加以下行以进行修复：

chart.options.yAxis[0].title.text = 'new title';

- Hauke

Answer 5

我已经创建了一个演示 fiddle，用于动态更改 y 轴标题。请参考此 JSFIDDLE。

HTML：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">

JS（在按钮点击时更新y轴标题的代码部分）：

var chart = $('#container').highcharts();
    $('#my_btn').click(function(){
        //alert('hey');
        chart.yAxis[0].update({
            title:{
                text:"My text"
            }
        });
        alert('Y-axis title changed to "My text" !');
    });

请参考 Highcharts 'update' 函数文档 以获取更多详细信息。

- Rahul Gupta