Highcharts: Modulize Highchart؟ القدرة على اهتزاز الشجرة.

مرحبًا envil ،
في البداية أنصحك بتحميل highstock.js فقط والذي يتضمن جميع ميزات Highcharts. يمكنك أيضًا إنشاء ملفك المخصص بواسطة أداتنا هنا:

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

تم تشكيل Highcharts lib بالفعل: 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' . هذا قد يساعد البعض في هذه القضية.

نحن نعمل حاليًا أيضًا على جعل ملفات هذه الأجزاء أكثر استقلالية ، مما يؤدي إلى تحسين إمكانات اهتزاز الأشجار. من الصعب بعض الشيء في الوقت الحالي تقديم ETA جيد لموعد نشر هذا ، لكنني سأبقيك على اطلاع بمجرد معرفة المزيد.

مرحبا،

أنا أستخدم نوع "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-response التي تستخدم صيغة الاستيراد *. أنا لا أستسلم بعد ولكني لم أتمكن من الحصول على عمل هز الشجرة من أجله حتى الآن.

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

الحل الحالي الخاص بي: الوحدة النمطية Alias ​​Highcharts في وحدة Highstock.

يمكنك استخدام كل من نوع الرسم البياني (Highcharts / Highstock) وحجم الحزمة المنخفض 🥇.

يمكن القيام بذلك باستخدام Webpack (راجع "delete.alias" في وثائق Webpack لمزيد من المعلومات):

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

يمكنك عمل aliasing مع Babel إلى (babel-plugin-module-solutionver).

سيكون من الرائع لو استطعنا جعل الليب كله نمطيًا.

لاحظ أنه يمكن تحميل 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 نظرًا لأنها حقًا مكتبة ضخمة لاستيرادها إلى مشروعي :(

مرحباYohandah! نحن في منتصف الطريق تقريبًا ، كما ترى في 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/