Highcharts：如何添加另一个(自定义)标签/图例/其他东西到图表的右上角？

gj3fmq9x 于 2022-11-11 发布在 Highcharts

关注(0)|答案(2)|浏览(283)

在我的 highcharts 中，我已经在图表的左下角有一个图例，但我想为整个图表添加一个自定义状态指示器。它将是一个彩色椭圆，上面有一个彩色点和一个状态，如图所示。
我是否应该尝试使用自定义图例或其他内容？我不需要隐藏/显示图例的功能，所以我可能认为标签更合适，但似乎这些内容只能放在图表中。我希望图表的右上角有一些内容。我正在查看API，以查看其他可用内容，但没有找到符合我需要的内容。
编辑-看起来我可能要做“chart.renderer.text”，但我不知道如何转换并使其在typescript 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();

}）;

highcharts

来源：https://stackoverflow.com/questions/71068990/highcharts-how-to-add-anothercustom-label-legend-something-else-to-the-top

2条答案

按热度按时间

bis0qfac1#

在图例中添加自定义元素的最佳方法是使用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/

赞(0）回复(0）举报 2022-11-11

7eumitmz2#

我决定只是摆脱标题和添加自定义的css到它的顶部。

赞(0）回复(0）举报 2022-11-11