Highcharts / Typescript：如何使用scatter3d旋转？

Question

所以我在.ts文件中有import * as Highcharts from 'highcharts'和我的highcharts chart: any，而不是.js文件。

该图表是scatter3d（3dimensional）。我想让它可以旋转。在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));

就像在这里的官方演示中所示：jsfiddle scatter3d demo

但这不适用于打字稿。如何重写这个以使scatter3d图表可以旋转？

Answer 1

你必须加载和初始化highcharts-3d模块：

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

Highcharts3d(Highcharts);

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

查看下面发布的演示，其中包含使用highcharts-angular（官方Highcharts包装器）的Angular应用程序。它可以在这里下载：https://github.com/highcharts/highcharts-angular

演示（在图表呈现错误时重新加载视图 - codesandbox问题）：

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