Question

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

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

和我的on hover函数添加注释如下

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

Answer 1

我发现当我使用Highcharts添加注释时，尽管我的试验，“linkedTo”功能仍未奏效。

尽管在我的观点上添加了一个指南，它仍然无法应用它。在你的情况下我建议用x和y值加上它，然后找到那个点。以下是我过去成功添加注释的方法：

 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，但它应该被这一行调用：

           _chart.removeAnnotation(id);

它将删除注释，但是如果您尝试在之后执行任何操作，那么您将从highcharts获得很多投诉，并且它将会中断。我在annotations.js中找到了答案：

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

快乐的图表。

Highcharts注释无法呈现

1 个答案: