Question

全部，我试图允许用户点击两个数据点之间的高图并画一条线。结果行将在渲染行上方计算LARGESTVALUE-SMALLESTVALUE。

$(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/

Answer 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]]
        }]
    });
});

Highcharts：添加点而不连接系列

2 个答案: