Highcharts 注释未呈现 [英] Highcharts annotations not rendering

问题描述

我正在尝试在 React 中动态添加注释到我的高点图表.我正在使用 addAnnotation 函数在我的应用程序上触发悬停事件时添加新注释，但该注释不呈现.我将调试器放入我的代码中，当我调用 chart.annotations 时，我可以看到当前有一个注释数组，但它们没有呈现.我什至在这个函数中调用了 addPlotLine 并且绘图线呈现在图表上.我的配置文件看起来像这样

I'm trying to dynamically add annotations to my high charts in React. I'm using the addAnnotation function to add a new annotation whenever a hover event is triggered on my app, but the annotation does not render. I dropped a debugger into my code, and when I call chart.annotations I can see there is currently an array of annotations, but they are not rendering. I even have make a call to the addPlotLine in this function and the plotline is rendered on the chart. My config file looks like this

chart: {
      annotations: [{
        labelOptions: {
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          verticalAlign: 'top',
          align: 'right',
        }
      }],
      annotationsOptions: {
      },
    .... some lots more config options
}

和我的悬停功能添加注释如下

and my on hover function to add the annotation is as follows

if( isNumber(value) )
   //this renders a plotline
    chart.xAxis[0].addPlotLine(baseChartHandle.generateInteractivePlotLine(value));
    // this doesn't render my annotation however
    chart.addAnnotation({
      linkedTo: value,
      title: {
        text: "It works!"
      }
    });
}

推荐答案

我发现，当我使用 Highcharts 添加注释时，linkedTo"会出现问题.尽管我尝试过，但功能从未奏效.

I found that when I added annotations using Highcharts that the "linkedTo" function never worked despite my trials.

尽管在我的观点中添加了 guid，但它始终无法应用它.我建议在你的情况下通过 x 和 y 值添加它，然后以这种方式找到点.以下是我过去成功添加注释的方式:

Despite adding a guid to my point, it never was able to apply it. I would suggest in your case adding it by x and y value, then finding the point that way instead. Here is how I have added annotations in the past successfully:

 series.data.forEach(function (point) {

                var annotationObject =
                    {
                        id: point.id,
                        labelOptions: {
                            y: 15,
                            verticalAlign: 'bottom',
                            distance: 25
                        },
                        labels: []
                    };

                }

                var text = <get text you want to push>;

                annotationObject.labels.push(
                    {
                        point: {
                            xAxis: 0,
                            yAxis: 0,
                            x: point.x,
                            y: point.y
                        },
                        text: text
                    }

                );

                _chart.addAnnotation(annotationObject);
            });

作为提醒，我还在 HighCharts 中使用删除注释时发现了一个错误.每个点都需要一个像上面一样的 id，但它应该由这一行调用:

I also found a bug in HighCharts when using remove annotations, as a heads up. Each point will need an id like above, but it should be called by this line:

           _chart.removeAnnotation(id);

它会删除注释，但是如果您之后尝试执行任何操作，您将收到来自 highcharts 的很多 投诉，并且它会崩溃.我在 annotations.js 中找到了答案:

It will remove the annotation, however you will get lots of complaints from highcharts if you try to do anything after, and it will break. I found the answer here, in annotations.js :

红框是我添加的代码.如果您执行 removeAnnotation(ann.id)，并且它重新渲染，它将失败，因为标签对象为空.添加此检查可让您在没有 labelCollectors 失败的情况下执行此操作.

The red box is code I added. If you do removeAnnotation(ann.id), and it rerenders, it will fail because the labels object is null. Adding this check lets you do that without the labelCollectors failing.

图表制作愉快.

这篇关于Highcharts 注释未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！