如何在 Highcharts 中将注释文本添加到 x 和 y 轴？答案

【问题标题】：How to add annotation text to x and y axis in Highcharts?如何在 Highcharts 中将注释文本添加到 x 和 y 轴？
【发布时间】：2021-06-21 08:46:30
【问题描述】：

我有一个气泡图，需要在 x 轴和 y 轴上显示注释文本。我整理了一张图片来展示我希望通过使用注释来实现的目标：

Bubble Chart

我是新手，如果有人可以提供帮助，我将不胜感激。

https://jsfiddle.net/Sam786/qwormkt2/1/

let chart = Highcharts.chart('bubble_chart', {
            chart: {
                type: 'bubble',
                zoomType: 'xy'
            },
            title: { text: "" },
            xAxis: {
                title: {
                    text: "106. How disruptive has the COVID-19 pandemic been to your ability to do your work?"
                },
                plotLines: [{
                    value: 4,
                    color: 'darkgray',
                    dashStyle: 'shortdash',
                    width: 2,
                    valueDecimals: 2,
                    // label: {
                    //     text: 'SEC Avg',
                    // }
                    zIndex: -1
                }],
            },
            yAxis: {
                title: {
                    text: "107. How has your work demands changed because of the COVID-19 pandemic?"
                },
                plotLines: [{
                    value: 2.5,
                    color: 'darkgray',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'SEC Average',
                        verticalAlign: 'bottom'
                    }
                }]
            },
            credits: {enabled: false},
            tooltip: {
                useHTML: true,
                headerFormat: '',
                pointFormat:  '<strong>{point.org}</strong><br/>'+
                              'Respondents: <b>{point.z}</b><br/>'+
                              'X-Question Avg: <b>{point.x}</b><br/>'+
                              'Y-Question Avg: <b>{point.y}</b>',
                footerFormat: '',
                valueDecimals: 1
            },
            
            series: [{
                name: groups[0],
                color: Highcharts.getOptions().colors[0],
                data: []
            }, {
                name: groups[1],
                color: Highcharts.getOptions().colors[1],
                data: []
            }, {
                name: groups[2],
                color: Highcharts.getOptions().colors[2],
                data: []
            }]
        });

【问题讨论】：

标签： javascript jquery highcharts bubble-chart

【解决方案1】：

您可以按照第二个答案中的建议使用 SVGRenderer 工具，但如果您想使用注释，您可以通过在 chart.event.load 回调中添加它们来自定义它们的位置。

演示：https://jsfiddle.net/BlackLabel/nc9fe1Lt/

  chart: {
    events: {
      load() {
        const chart = this;

        chart.addAnnotation({
          labels: [{
            text: 'test',
            point: {
              x: 0,
              y: chart.plotHeight + chart.spacing[2]
            },
            shape: 'rectangle'
          }, {
            text: 'test2',
            point: {
              x: chart.plotWidth,
              y: chart.plotHeight + chart.spacing[2]
            },
            shape: 'rectangle'
          }]
        })
      }
    }
  },

API：https://api.highcharts.com/class-reference/Highcharts.Chart#addAnnotation

API：https://api.highcharts.com/highcharts/chart.events.load

【讨论】：

【解决方案2】：

您可以使用 SVGRenderer 在图表内绘制形状和文本。以下是来自 Highcharts 官方论坛的示例：http://jsfiddle.net/ajxyuax2/1/

chart.renderer.text('Some text', 80, 80)
  .attr({ zIndex: 10 })
  .css({ fontSize: '12px'})
  .add();

chart.renderer.rect(75, 65, 135, 40, 2)
  .attr({
    'stroke-width': 2,
    stroke: 'black',
    fill: '#CEF74A',
    zIndex: 4
  })
  .add();

请参阅documentation of SVGRenderer 了解所有可用选项。您可以使用text 方法显示文本，您可以使用rect 方法绘制一个矩形。

【讨论】：