HighChart高亮点

Question

我在Angular中使用HighChart：https://www.npmjs.com/package/angular-highcharts。

我正在尝试复制Synchronized Charts的演示

我的代码与演示中的代码几乎相同，只是做了些微的更改。

TS：

highlight(e: any) {
      var chart: Chart,
          point,
          i,
          event;

      for (i = 0; i < this.list_redenredCharts.length; i = i + 1) {       
        chart = this.list_redenredCharts[i];
        // Find coordinates within the chart
        event = chart.ref.pointer.normalize(e);
        // Get the hovered point
        const points = this.list_redenredCharts[0].ref.hoverPoint;
        const serie = chart.ref.series[0] as any;

        point = serie.searchPoint(event, true);



        if (point) {
            point.highlight(e);
      }
    }

这里的区别在于，我在this.list_renderedCharts中有我的图表列表，并且我的事件类型是在我的html div中接收的。

在到达代码point.highlight(e)的突出显示部分之前，结果是相同的，在控制台上将出现以下错误：point.highlight is not a function。

该站点上的演示使用highchart版本7.0.x，而我的似乎是版本8。难道没有人知道如何立即强调这一点吗？

Answer 1

point.highlight不是默认功能。它仅被添加到同步图表演示中，因此您必须将其手动添加到您的应用中。

制作一个新文件并在其中添加以下代码（例如sync-addition.js示例）：

export const syncChartsInit = function(Highcharts) {
  /**
   * Override the reset function, we don't need to hide the tooltips and
   * crosshairs.
   */
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  Highcharts.Point.prototype.highlight = function(event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };
};

在图表组件导入内部并对其进行初始化：

import * as Highcharts from "highcharts";
import * as syncCharts from "./sync-addition";

syncCharts.syncChartsInit(Highcharts);

演示：

• https://codesandbox.io/s/ry839k99om