Highcharts annotations not rendering

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/47636386/highcharts-annotations-not-rendering

标签

javascript

Highcharts

annotations