高级图表/打字稿:如何使用scatter3d旋转？

Question

所以我在一个import * as Highcharts from 'highcharts'文件中包含了chart: any ，而不是.js文件。

该图表是一个scatter3d (三维)。我想让它旋转。在JavaScript中，它通过使用

(function(H) {
  function dragStart(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,
      sensitivity = 5, // lower is more sensitive
      handlers = [];

    function drag(e) {
      // Get e.chartX and e.chartY
      e = chart.pointer.normalize(e);

      chart.update({
        chart: {
          options3d: {
            alpha: alpha + (e.chartY - posY) / sensitivity,
            beta: beta + (posX - e.chartX) / sensitivity
          }
        }
      }, undefined, undefined, false);
    }

    function unbindAll() {
      handlers.forEach(function(unbind) {
        if (unbind) {
          unbind();
        }
      });
      handlers.length = 0;
    }

    handlers.push(H.addEvent(document, 'mousemove', drag));
    handlers.push(H.addEvent(document, 'touchmove', drag));


    handlers.push(H.addEvent(document, 'mouseup', unbindAll));
    handlers.push(H.addEvent(document, 'touchend', unbindAll));
  }
  H.addEvent(chart.container, 'mousedown', dragStart);
  H.addEvent(chart.container, 'touchstart', dragStart);
}(Highcharts));

如下面的官方演示所示：scatter3d演示

但这在打字稿中行不通。我如何重写这个使scatter3d图表可以旋转？

Answer 1

您必须像这样加载和初始化highcharts-3d模块：

import * as Highcharts from "highcharts/highcharts";
import * as Highcharts3d from "highcharts/highcharts-3d";

Highcharts3d(Highcharts);

要使其可旋转，只需在图表加载后添加此功能，例如使用图表回调。

查看下面发布的演示，并以一个使用highcharts-angular (官方高级图表包装)的角度应用程序为例。它可以在这里下载：https://github.com/highcharts/highcharts-angular

演示(在图表呈现错误时重新加载视图-代码框问题)：

• https://codesandbox.io/s/jp9jm5n6vy