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

Question

我需要在线上添加一个点 - 而不是在任何地方 - 单击而不更改线，然后添加与该点相交的两条线（如十字准线或绘图线）。

我尝试使用 "addPoint" 函数，但它改变了系列的行。

Answer 1

您需要设置allowPointSelect as true and then configure state of marker by options. Next step is catch click event on point and use 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

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

highchart : add point without changing the series' line

highcharts