Highcharts：添加点而不连接系列答案

【问题标题】：Highcharts: Add point without connecting seriesHighcharts：添加点而不连接系列
【发布时间】：2016-11-15 01:24:11
【问题描述】：

所有，我试图让用户点击两个数据点之间的高图并画一条线。结果线将在渲染线上方计算 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]]
            }]
        });
    });

});

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

有没有办法做到这一点？

谢谢

【问题讨论】：

我会添加一个新系列，并将点添加到该新系列而不是现有系列。
我也在想同样的事情，但我正在努力从“chart.events.click = function(e){}”内部访问“图表”
console.log(this)，看看是什么路径引导您进入图表 :)

标签： javascript highcharts series

【解决方案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/

【讨论】：

【解决方案2】：

我用了以下

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
            margin: [70, 50, 60, 80],
            events: {
                click: function (e) {
                  var c = this.series[0].chart;
                  var s = this.series.length;
                  var x = e.xAxis[0].value;
                  var y = e.yAxis[0].value;

                  if(s == 1) {
                    c.addSeries('newSeries' + new Date());
                    c.series[1].addPoint([x, y]);
                  }else{
                    if(this.series[this.series.length-1].data.length%2 == 1) {
                        c.series[this.series.length-1].addPoint([x, y]);
                    }else{
                        c.addSeries('newSeries' + new Date());
                      c.series[this.series.length-1].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: {
            gridLineWidth: 1,
            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]]
        }]
    });
});

【讨论】：