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/

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

1 个答案: