如何在 highstock 图表上拖动 select 多列并将其反映在导航器上？

Question

我有两个目标。首先是能够禁用主图表上的默认拖动，并在列上使用拖动和多个 select。其次，我想知道是否可以在主图表下方的导航栏上也反映此 selection。请指教

谢谢

Answer 1

这可以通过使用 point.select() 和 chart.events.selection 事件来实现。这是一个示例配置：

  chart: {
    renderTo: 'container',
    type: 'column',
    panning: false,
    zoomType: 'x',
    events: {
      selection: function (e) {
        var xAxis = e.xAxis[0],
            flag = false; // first selected point should deselect old ones

        if(xAxis) {
          $.each(this.series, function (i, series) {
            $.each(series.points, function (j, point) {
                if( point.x >= xAxis.min && point.x <= xAxis.max ) {
                point.select(true, flag);
                if (!flag) {
                    flag = !flag; // all other points should include previous points
                }
              }
            });
          });
        }

        return false; // prevent zoom
      }
    }
  },

演示：http://jsfiddle.net/ma50685a/4/

如何在 highstock 图表上拖动 select 多列并将其反映在导航器上？

How to drag select multiple columns on highstock chart and have it reflect on the navigator?

highcharts

highstock