在 highcharts 中使用动态 html 渲染标题答案

【问题标题】：Render title with dynamic html in highcharts在 highcharts 中使用动态 html 渲染标题
【发布时间】：2019-02-27 11:29:44
【问题描述】：

我必须在图表后面的空格中添加一个数字。像这样的

这里是Fiddle

这是我的代码

  title: {
    text: title,
    align: 'left',
    x: 10,
    style: {
      color: '#000000',
      fontSize: '20px',
      fontWeight: '600',
      lineHeight: '29px'
    },
  },
  subtitle: {
    text: subtitle,
    align: 'left',
    x: 10,
    style: {
      color: '#4A4A4A',
      fontSize: '14px',

    },
    y: 50,
  },

我该怎么做？

【问题讨论】：

只需将<span> 添加到您的容器中：jsfiddle.net/khrismuc/kwtzsd7o
不使用jquery有没有更好的办法？
你可以用 vanilla JS 做同样的事情。当您说“使用动态 html 呈现标题”时，您的具体意思是什么？

标签： javascript reactjs highcharts react-highcharts

【解决方案1】：

您可以使用Highcharts.SVGRenderer.text 添加文本。检查下面发布的代码和演示。

代码：

  chart: {
    type: 'areaspline',
    width: 300,
    height: 275,
    events: {
      load: function() {
        var chart = this,
          number = 853;

        chart.renderer.text(number, 50, 70)
          .css({
            color: '#8b8bff',
            fontSize: 26,
            fontWeight: 'bold'
          })
          .add()
          .toFront();
      }
    }
  }

演示：

http://jsfiddle.net/BlackLabel/kqay3e7g/1/

API 参考：

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

【讨论】：

非常感谢