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

因此，我从“Highcharts”中将“

import*作为Highcharts”

和我的Highcharts

chart:any

放在.ts文件中，而不是.js文件中

该图表是一个散点3D（三维）。我想让它可以旋转。在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));

如官方演示所示：

---

但这在typescript中不起作用。我如何重写它以使scatter3d图表可旋转？

您必须加载并初始化

highcharts-3d

模块，如下所示：

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

Highcharts3d(Highcharts);

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

查看下面发布的演示，其中使用了一个Angular应用程序示例

highcharts Angular

（官方highcharts包装）。可在此下载：

演示（图表呈现不正确时重新加载视图-codesandbox问题）：