Highcharts动态更改标签?

时间:2012-09-05 08:42:34

标签: javascript jquery highcharts

此图片上有一个标签:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo/标签是“水果消费总量”

创建图表后,如何动态更改该句子?

PS:我尝试设置标签并重绘图片但不起作用:http://jsfiddle.net/UXDqL/

有什么想法吗?

3 个答案:

答案 0 :(得分:9)

使用标签时,您可以使用渲染器text()然后使用变量来保留对象。如果你需要动态更新这个文本,只需要使用attr()函数和更新。

http://jsfiddle.net/6GKCJ/2/

var title = chart.renderer.text('Total fruits consumption', 100, 90)
        .css({
            fontSize: '12px'
        })
        .add();

        $('#btn').click(function(){

            title.attr({
                text:'newText'
            });
        });

答案 1 :(得分:2)

如果要在绘制绘图后更改它,只需对元素本身进行操作即可。使用jquery选择器就像它一样简单:

// find me the tspan containing the specified text and change it to...
$("tspan:contains('Total fruit consumption')").text("Something New")

答案 2 :(得分:1)

从Highcharts 3.0开始,Highchart不提供动态更新标签标头的任何方法。 虽然它确实提供了一种动态更新系列的方法:http://api.highcharts.com/highstock#Series.update()

要更新标签标题,我们需要遵循强力方法,即在更新图表选项后再次渲染图表。以下代码应该可以解决问题:

var mychart = $('#container').highcharts();
    mychart.options.labels.items[0].html= "Changed label header";
    mychart = new Highcharts.Chart(mychart.options);
    mychart.render();

JsFiddle:http://jsfiddle.net/msjaiswal/ZD4N5/2/

类似的主题:here