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

Posted 2023-02-18

【中文标题】如何在 Highcharts 中将注释文本添加到 x 和 y 轴？

【英文标题】：How to add annotation text to x and y axis in Highcharts?

【发布时间】：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: []
            ]
        );

【参考方案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 方法绘制一个矩形。