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 Scatter图表滚动

1 个答案: