动态更改 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/