Highcharts: Модулировать Highchart? Возможность встряхивания дерева.

Привет @envil ,
В начале я советую вам загрузить только highstock.js , который включает в себя все функции Highcharts. Вы также можете создать свой собственный файл с помощью нашего инструмента здесь:

• https://www.highcharts.com/download

Библиотека Highcharts уже имеет модульную структуру: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files .

Спасибо за ваши ответы.
Я смотрю на функцию пользовательской сборки. Это дает мне highchart-custom.src.js , который совсем не удобен в использовании, поскольку это не node_modules, поэтому я не могу импортировать его в свое приложение Angular обычным способом. И все определения типов для машинописного текста исчезли.

Также я имею в виду модуль ES, полностью независимый и может быть импортирован в другие модули ES. Посмотрите, как lodash и date-fns победили underscore и momentjs . Одним из наиболее важных факторов является подобная модульность.

@jon-a-nygaard К вашему сведению

Я тоже сталкиваюсь с этим.
Я пытался использовать import * as Highstock from 'highcharts/highstock'; , но это не дало никакого эффекта.

Привет, некоторое время назад мы начали публиковать файлы наших деталей в виде модулей ES, что означает, что вы можете делать import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' . Это может помочь некоторым в этом вопросе.

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

Привет,

я использую только тип "stockChart" и столкнулся с той же проблемой, но нашел решение, описанное здесь:
https://github.com/highcharts/highcharts-angular#core

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

вместо :
import * as Highcharts from 'highcharts/highstock';

теперь в комплекте это выглядит так:

Я использую highcharts-react, который использует синтаксис import *. Я еще не сдаюсь, но до сих пор мне не удалось заставить встряхнуть дерево.

https://github.com/highcharts/highcharts-react/blob/08cd61ca178276d716ae65fba76e1d07924b2838/src/HighchartsReact.d.ts#L6

Мой текущий обходной путь: модуль Alias ​​​​Highcharts в модуле Highstock.

Вы можете использовать как тип диаграммы (Highcharts/Highstock), так и меньший размер пакета 🥇.

Это можно сделать с помощью Webpack (см. «resolve.alias» в документации Webpack для получения дополнительной информации):

    alias: {
      highcharts$: 'highcharts/highstock.js',
    }

Вы можете сделать с помощью Babel псевдоним (babel-plugin-module-resolver).

Было бы неплохо, если бы мы могли модулировать всю библиотеку.

Обратите внимание, что Highstock можно загрузить как модуль в Highcharts, используя модуль modules/stock.js . Как упоминалось выше:

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

@pawelfus Почему-то это не работает в моих тестах: TypeError: Highcharts.stockChart is not a function

Однако проблем с типом нет, и само приложение тоже работает. Я использую шутку. Любая идея?

ОБНОВИТЬ
Выяснил, что разрешение модуля по-разному в jest.config.js работает:

  moduleNameMapper: {
    '^highcharts$': '<rootDir>/node_modules/highcharts/highstock'
  },

Любое обновление по этому поводу? Подумываю об удалении Highcharts, так как это действительно ОГРОМНАЯ библиотека для импорта в мой проект :(

Привет @Йоханда! Мы прошли примерно половину пути, как вы можете видеть на странице https://github.com/highcharts/highcharts/issues/12738.

Вы можете использовать большинство модулей ES для встряхивания дерева. Хотя на данный момент это официально не поддерживается (только мастера), потому что мы сейчас перемещаем и разделяем файлы. Так что в следующем релизе пути в примере будут другими.

import Chart from 'https://code.highcharts.com/es-modules/parts/Chart.js'
import SVGRenderer from 'https://code.highcharts.com/es-modules/parts/SVGRenderer.js'
new Chart('container', { /* ...options... */ });

https://jsfiddle.net/xtof0m14/