Highcharts: Moduler Highchart ? Capacité de secouage des arbres.

Salut @envil ,
Au début, je vous conseille de ne charger que highstock.js qui inclut toutes les fonctionnalités de Highcharts. Vous pouvez également créer votre fichier personnalisé par notre outil ici :

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

Highcharts lib est déjà modularisé : https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

Merci pour vos réponses.
Je regarde la fonction de construction personnalisée. Cela me donne un highchart-custom.src.js qui n'est pas du tout pratique à utiliser car ce n'est pas un node_modules, donc je ne peux pas l'importer dans mon application Angular de manière régulière. Et toutes les définitions de type pour le tapuscrit ont disparu.

Ce que je veux dire également, c'est le module ES, complètement indépendant et qui peut être importé dans d'autres modules ES. Voyez comment lodash et date-fns ont vaincu underscore et momentjs , l'un des facteurs les plus importants est la capacité de modularisation comme celle-ci.

@jon-a-nygaard Pour info

Je suis également confronté à cela.
J'ai essayé de faire le tour avec import * as Highstock from 'highcharts/highstock'; mais cela n'a aucun effet.

Salut, il y a quelque temps, nous avons commencé à publier nos fichiers de pièces sous forme de modules ES, ce qui signifie que vous pouvez faire import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' . Cela peut aider certains sur la question.

Nous travaillons également actuellement à rendre ces fichiers de pièces plus autonomes, ce qui devrait améliorer les capacités de secouage des arbres. Il est un peu difficile pour le moment de donner un bon ETA pour quand cela sera publié, mais je vous tiendrai au courant dès que j'en saurai plus.

salut,

J'utilise uniquement le type 'stockChart' et j'ai rencontré le même problème, mais j'ai trouvé une solution décrite ici :
https://github.com/highcharts/highcharts-angular#core

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

à la place de :
import * as Highcharts from 'highcharts/highstock';

maintenant en bundle, ça ressemble à ça :

J'utilise highcharts-react qui utilise la syntaxe import *. Je n'abandonne pas encore mais je n'ai pas réussi à faire fonctionner le secouage des arbres jusqu'à présent.

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

Ma solution de contournement actuelle : le module Alias ​​Highcharts dans le module Highstock.

Vous pouvez utiliser à la fois le type de graphique (Highcharts/Highstock) et sa taille de bundle inférieure 🥇 .

Cela peut être fait avec Webpack (vérifier "resolve.alias" dans la documentation Webpack pour plus d'informations) :

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

Vous pouvez faire un aliasing avec Babel vers (babel-plugin-module-resolver).

Ce serait bien si nous pouvions modulariser l'ensemble de la bibliothèque.

Notez que Highstock peut être chargé en tant que module dans Highcharts, en utilisant le module modules/stock.js . Comme mentionné ci-dessus :

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

@pawelfus D'une manière ou d'une autre, cela échoue dans mes tests avec : TypeError: Highcharts.stockChart is not a function

Aucun problème de type cependant et l'application elle-même fonctionne aussi. J'utilise la plaisanterie. Une idée?

METTRE À JOUR
J'ai découvert que la résolution différente du module dans jest.config.js fonctionne :

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

Une mise à jour pour ceci ? Envisager de laisser tomber Highcharts car c'est vraiment une bibliothèque ÉNORME à importer dans mon projet :(

Salut @Yohandah ! Nous sommes à mi-chemin, comme vous pouvez le voir sur https://github.com/highcharts/highcharts/issues/12738.

Vous pouvez utiliser la plupart des modules ES pour secouer les arbres. Bien que ce ne soit pour le moment pas officiellement pris en charge (uniquement les masters), car nous déplaçons et divisons les fichiers en ce moment. Ainsi, avec la prochaine version, les chemins de l'exemple seront différents.

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/