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

Question

我希望动态更改仪表图上的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属性？

Answer 1

修改您的函数，使其在第一次调用时创建一个标签，然后，当标签已创建时，仅更改某些参数。

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/