highchart:在不改变系列的情况下添加点数'线

时间:2015-04-24 07:50:34

标签: highcharts

我需要在线上添加一个点 - 不在任何地方 - 点击而不更改线​​条,然后添加与点相交的两条线(如十字线或情节线)。

我试过使用" addPoint"功能,但它改变了系列的线。

external img

1 个答案:

答案 0 :(得分:0)

您需要将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