highchart：在不改变系列线条的情况下添加点

Question

我需要在点击线条上添加点 - 不点击任何位置 - 点击时不改变线条，然后添加与点相交的两条线（如十字线或情节线）。

我试图使用“addPoint”函数，但它改变了serie的行。

Answer 1

您需要设置allowPointSelect为true，然后通过options配置标记的状态。下一步是在点上捕获click event并使用Renderer添加自定义形状。

series: { 
      allowPointSelect: true, 
      marker: { 
       states: { 
        select: { 
         enabled: true, 
         fillColor: 'red', 
         color: 'red' 
        } 
       }, 
      }, 
      point: { 
       events: { 
        click: function() { 
         var chart = this.series.chart, 
          r = chart.renderer, 
          left = chart.plotLeft, 
          top = chart.plotTop, 
          width = chart.plotWidth, 
          height = chart.plotHeight, 
          x = this.plotX, 
          y = this.plotY; 

         if (this.series.options.enabledCrosshairs) { 
          if (crosshair !== UNDEFINED) crosshair.destroy(); 

          crosshair = r.path(['M', left, top + y, 'L', left + x, top + y, 'M', left + x, top + y, 'L', left + x, top + height]) 
           .attr({ 
           'stroke-width': 1, 
           stroke: 'red' 
          }) 
           .add(); 
         } 
        } 
       } 
      } 
     } 

例：http://jsfiddle.net/u4ha3cxw/15/ 例与点击系列：jsfiddle.net/u4ha3cxw/17