javascript - Highcharts:添加点而不连接系列

Question

所有， 我试图允许用户单击两个数据点之间的 Highcharts 并画一条线。生成的线将计算渲染线上方的 LARGESTVALUE-SMALLESTVALUE。

我正在尝试使用此示例 ( http://jsfiddle.net/2MdEN/1/ )。

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'scatter',
                margin: [70, 50, 60, 80],
                events: {
                    click: function(e) {
                        // find the clicked values and the series
                        var x = e.xAxis[0].value,
                            y = e.yAxis[0].value,
                            series = this.series[0];

                        // Add it
                        series.addPoint([x, y]);

                    }
                }
            },
            title: {
                text: 'User supplied data'
            },
            subtitle: {
                text: 'Click the plot area to add a point. Click a point to remove it.'
            },
            xAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                maxZoom: 60
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                minPadding: 0.2,
                maxPadding: 0.2,
                maxZoom: 60,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            plotOptions: {
                series: {
                    lineWidth: 1,
                    point: {
                        events: {
                            'click': function() {
                                if (this.series.data.length > 1) this.remove();
                            }
                        }
                    }
                }
            },
            series: [{
                data: [[20, 20], [80, 80], null, [60, 40], [85, 60]]
            }]
        });
    });

});

问题在于将系列中的最后一个数据点连接到新添加的点。我希望将这些点从系列中分离出来，以便在生成的图表上方绘制线条。

有什么办法可以实现这一点吗？

谢谢

Answer 1

您可以在图表配置中包含第二个空系列，并更改要添加点的系列:

    events: {
      click: function(e) {
        // find the clicked values and the series
        var x = e.xAxis[0].value,
          y = e.yAxis[0].value,
          series = this.series[1]; <------------

        // Add it
        series.addPoint([x, y]);

      }
    }

如果您不希望用户能够从原始数据中删除点，您还可以将点单击事件移至第二个系列:

  series: [{
    data: [
      [20, 20],
      [80, 80], null, [60, 40],
      [85, 60]
    ]
  }, {
    id: 'dummy',
    color: 'rgba(204,0,0,0.9)',
    point: {
      events: {
        'click': function() {
          this.remove();
        }
      }
    }
  }]

更新的示例:

• http://jsfiddle.net/2MdEN/107/