Highcharts：如何在图表的右上角添加另一个（自定义）标签/图例/其他内容？

Question

在我的 highcharts 中，我已经在图表的左下角有一个图例，但我想为整个图表添加一个自定义状态指示器。它将是一个带有彩色圆点和状态的彩色椭圆形，如图所示。

我应该尝试使用自定义图例还是其他东西？我不需要 hide/show 传奇的能力，所以也许我认为标签更合适，但似乎那些只出现在图表中。我想要图表右上角的东西。我正在浏览 API 看看还有什么可用的，但没有找到适合我需要的。

编辑- 好像我可能不得不做“chart.renderer.text”，但我不确定如何转换并使其在打字稿中工作http://jsfiddle.net/phpdeveloperrahul/HW7Rm/

function (chart) {

var point = chart.series[0].data[8],
    text = chart.renderer.text(
        'Max',
        point.plotX + chart.plotLeft + 10,
        point.plotY + chart.plotTop - 10
    ).attr({
        zIndex: 5
    }).add(),
    box = text.getBBox();

chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
    .attr({
        fill: '#FFFFEF',
        stroke: 'gray',
        'stroke-width': 1,
        zIndex: 4
    })
    .add();

});

Answer 1

我决定去掉标题并在其顶部添加自定义 css。

Answer 2

在图例中添加自定义元素的最佳方法是使用 legend.labelFormatter。

events: {
  render() {
    let chart = this,
      legendAttr = chart.legend.box.getBBox(),
      padding = 5;

    chart.plus = chart.renderer.text('| +', chart.legend.box.parentGroup.alignAttr.translateX + legendAttr.width + padding, chart.spacingBox.height + padding / 2).attr({
      cursor: 'pointer',
    }).css({
      fontSize: 20
    }).on(
      "click",
      function() {
        alert('plus was clicked')
      }
    ).add()
  }
}

API 参考资料： https://api.highcharts.com/highcharts/legend.labelFormatter,

演示：https://jsfiddle.net/BlackLabel/yu7qm9jx/1/

Highcharts：如何在图表的右上角添加另一个（自定义）标签/图例/其他内容？

Highcharts: How to add another(custom) label/ legend/ something else to the top right of the graph?

css

typescript

highcharts

react-highcharts