javascript - 在 highcharts 中使用动态 html 渲染标题

Question

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

这是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,
  },

我怎样才能做到这一点？

Answer 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