Highcharts / Typescript: Как использовать вращение scatter3d?

Question

Итак, у меня есть import * as Highcharts from 'highcharts' и мои старшие диаграммы chart: any внутри файла .ts , , а не в файле .js.

График представляет собой scatter3d (3-мерный). Я хочу сделать его вращающимся. В 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);

Чтобы сделать его вращаемым, просто добавьте эту функцию после загрузки диаграммы, используя, например, обратный вызов диаграммы.

Проверьте демоверсию, размещенную ниже, с примером приложения Angular, в котором используется highcharts-angular (официальная оболочка Highcharts). Его можно скачать здесь: https://github.com/highcharts/highcharts-angular

Демонстрация (перезагрузите представление, когда диаграмма отображается неправильно - коды и окно выдачи):

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