Question

是否可以以编程方式更改HighCharts图表的轴标题？

我正在尝试做这样的事情：

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

或

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

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

Answer 1

是的，您可以使用以下方法执行此操作：

chart.yAxis[0].axisTitle.attr({
        text: 'new title'
    });

Answer 2

现在可以使用Axis直接在setTitle对象上完成此操作。例如：

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

见this JSFiddle demonstration。方法签名是：

setTitle(Object title, [Boolean redraw])

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

Answer 3

我无法完成上述任何一项工作，也许自去年以来事情发生了变化......我最终使用了：

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

并且效果很好......

Answer 4

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

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

Answer 5

我创建了一个演示小提琴来动态更改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' function documentation 。

更改HighCharts轴标题

5 个答案: