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

问题描述

我试图在React中向我的高图表动态添加注释。无论何时在我的应用上触发悬停事件，我都会使用 addAnnotation 函数添加新注释，但注释不会呈现。我将一个调试器放到我的代码中，当我调用 chart.annotations 时，我可以看到当前有一组注释，但它们不是呈现。我甚至在这个函数中调用了 addPlotLine 并且图表在图表上呈现。我的配置文件看起来像这样

  chart：{
 annotations：[{
 labelOptions：{
 backgroundColor：'rgba（0，0，0，0.5）'，
 verticalAlign：'top'，
 align：'right'，
} 
}]，
 annotationsOptions：{
}，
 ....一些更多配置选项
} 
  

和我在悬停函数中添加的注解如下所示：

  if（isNumber（value ））
 //这会呈现一条情节线
 chart.xAxis [0] .addPlotLine（baseChartHandle.generateInteractivePlotLine（value））; 
 //这不会呈现我的注释然而
 chart.addAnnotation（{
 linkedTo：value，
 title：{
 text：It works！
} 
}）; 
} 
  

解决方案

使用Highcharts的注释，尽管我的试验linkedTo函数从未工作。

尽管在我的观点中加入了一个指导，但它从未能够应用它。我建议在你的情况下用x和y值加上它，然后用这种方法找到点。以下是我过去成功添加注释的方式：

  series.data.forEach（function（point）{
 
 var annotationObject = 
 {
 id：point.id，
 labelOptions：{
y：15，
 verticalAlign：'bottom'，
距离：25 
}，
标签：[] 
}; 
 
} 
 
 var text =<推送> ;; 
 
 annotationObject.labels.push（
 {
 point：{
 xAxis：0，
 yAxis：0，
x ：point.x，
y：point.y 
}，
文本：文本
} 
 
）; 
 
 _chart.addAnnotation（annotationObject）; 
}）; 
  

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

  _chart.removeAnnotation（id）; 
  

它将删除注释，但是您会收到很多投诉如果你试图在事后做任何事情，它将会突破，并且会崩溃。我在annotations.js找到了答案：

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

愉快的图表。

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!"
      }
    });
}

解决方案

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

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);
            });

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);

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 :

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.

Happy charting.

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