如果我滚动滚动条，则 3D 散点图滚动

Question

我正在渲染 Highcharts 3D 散点图并启用滚动，如下所示

xAxis: {
  categories: xlist,
  min: 0,
  max: 4,
  scrollbar: {
    enabled: true
  },
}

还可以使用以下代码滚动图表

$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
                eStart = chart.pointer.normalize(eStart);

                var posX = eStart.chartX,
                posY = eStart.chartY,
                alpha = chart.options.chart.options3d.alpha,
                beta = chart.options.chart.options3d.beta,
                newAlpha,
                newBeta,
                    sensitivity = 5; // lower is more sensitive

                    $(document).on({
                        'mousemove.hc touchmove.hc': function (e) {

                        e = chart.pointer.normalize(e);
                        newBeta = beta + (posX - e.chartX) / sensitivity;
                        chart.options.chart.options3d.beta = newBeta;


                        newAlpha = alpha + (e.chartY - posY) / sensitivity;
                        chart.options.chart.options3d.alpha = newAlpha;

                        chart.redraw(false);
                    },
                    'mouseup touchend': function () {
                        $(document).off('.hc');
                    }
                });
                });

如果我滚动滚动条，图表也会移动。如果我滚动滚动条，有什么方法可以避免图表滚动，如果我将鼠标放在图表上，那么图表应该移动。

Answer 1

我做了一个 hack 并更新了上面的函数如下，当我们使用滚动条时，我用 if(e.target.classList.length == 0) 限制了图表旋转.

$(chart.container).on('mousedown.hc touchstart.hc', function (eStart) {
            eStart = chart.pointer.normalize(eStart);

            var posX = eStart.chartX,
            posY = eStart.chartY,
            alpha = chart.options.chart.options3d.alpha,
            beta = chart.options.chart.options3d.beta,
            newAlpha,
            newBeta,
                sensitivity = 5; // lower is more sensitive

                $(document).on({
                    'mousemove.hc touchmove.hc': function (e) {
                  if (e.target.classList.length == 0) {
                    e = chart.pointer.normalize(e);
                    newBeta = beta + (posX - e.chartX) / sensitivity;
                    chart.options.chart.options3d.beta = newBeta;


                    newAlpha = alpha + (e.chartY - posY) / sensitivity;
                    chart.options.chart.options3d.alpha = newAlpha;

                    chart.redraw(false);
                  }
                },
                'mouseup touchend': function () {
                    $(document).off('.hc');
                }
            });
            });

如果我滚动滚动条，则 3D 散点图滚动

3D Scatter chart scrolling if I scroll the scrollbar

charts

scatter

highcharts

angularjs

highcharts-ng