动态更改HighCharts中的renderer.text css属性

问题描述：

我想动态更改我的量表图表上的css属性颜色值。显示文本的功能是在这里：动态更改HighCharts中的renderer.text css属性

function setText(text, x, check) { 
    var chart = $('#graph-4').highcharts(); 

    if (check === true) { 
     var color = '#ffffff'; 
    } else { 
     var color = '#555555'; 
    } 

    var ret = chart.renderer.text(text, chart.plotWidth*x, chart.plotHeight*0.5) 
    .attr({ 
     zIndex: 5 
    }) 
    .css({ 
     fontSize: '13px', 
     color: color, 
     'text-anchor': 'middle', 
    }) 
    .add(); 
}

我的我的代码是调用之前起作用的setText，它检查从JSON传入的值，所以如果传入值小于0（零），然后我的文字应该以一种颜色显示，并且当输入值大于0（零）时，文本应该以另一种颜色显示。图表从JSON和一系列准备动态清爽值由命令更新：

chart.series[0].setData(incoming_value);

这条线后，当我打电话的功能：

setText('myText', 0.3, colorParameter);

每次刷新生成新的文本添加上所以它在代码中生成新行，而不是干净的视觉效果。

我如何动态更新这个css属性？

答

修改你的函数，在第一次调用它时创建一个标签，然后当标签已经创建时，只改变一些参数。

function setText(text, x, check) { 
    var chart = $('#graph-4').highcharts(); 
    var ret = this.customText; 
    console.log(chart); 
    if (check === true) { 
    var color = '#ffffff'; 
    } else { 
    var color = '#555555'; 
    } 

    if (!ret) { 
    ret = this.customText = chart.renderer.text(null, -9999, -9999) 
    .attr({ 
     zIndex: 5 
    }) 
    .css({ 
     fontSize: '13px', 
     'text-anchor': 'middle' 
    }) 
    .add(); 
    } 

    ret.attr({ 
    text: text, 
    x: chart.plotWidth * x, 
    y: chart.plotHeight * 0.5 
    }).css({ 
    color: color 
    }); 
}

例如：http://jsfiddle.net/qdnk21ej/

如果我想只显示一个标签，这是非常有用的。但是，如果我想使用'setText'函数显示两个（或更多）标签，它仅适用于代码中的最后一次出现。那么我们可以在你的代码中改变它，使它更具普遍性/可重复性？临时我创建了第二个函数'setText2'，并将'this.customText'改为'this.customText1'。 – Pirum

我会创建一个数组/对象，它保留所有的自定义文本，并添加另一个参数来标识要更改的文本 - http://jsfiddle.net/qdnk21ej/1/ – morganfree

动态更改HighCharts中的renderer.text css属性

相关推荐