Highcharts: हाईचार्ट संशोधित करें? पेड़ हिलाने की क्षमता।

हाय @envil ,
शुरुआत में मैं आपको केवल highstock.js लोड करने की सलाह देता हूं जिसमें सभी हाईचार्ट्स सुविधाएं शामिल हैं। आप यहां हमारे टूल द्वारा अपनी कस्टम फ़ाइल भी बना सकते हैं:

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

Highcharts lib पहले से ही मॉड्यूलर है: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

आपके जवाबों के लिए शुक्रिया।
मैं कस्टम बिल्ड फीचर को देख रहा हूं। यह मुझे एक highchart-custom.src.js देता है जो उपयोग करने के लिए सुविधाजनक नहीं है क्योंकि यह नोड_मॉड्यूल नहीं है, इसलिए मैं इसे नियमित रूप से अपने कोणीय एप्लिकेशन में आयात नहीं कर सकता। और टाइपप्रति के लिए सभी प्रकार की परिभाषाएं समाप्त हो गई हैं।

इसके अलावा मेरा मतलब ES मॉड्यूल है, जो पूरी तरह से स्वतंत्र है और इसे अन्य ES मॉड्यूल में आयात किया जा सकता है। देखें कि कैसे lodash और date-fns ने underscore और momentjs $ को हराया है, इस तरह की मॉडर्नाइजेशन क्षमता सबसे महत्वपूर्ण कारकों में से एक है।

@ जॉन-ए-न्यागार्ड एफवाईआई

मैं भी इसमें भाग रहा हूं।
मैंने import * as Highstock from 'highcharts/highstock'; के साथ जाने की कोशिश की लेकिन इसका कोई प्रभाव नहीं पड़ा।

नमस्ते, कुछ समय पहले हमने अपने हिस्से की फाइलों को ES मॉड्यूल के रूप में प्रकाशित करना शुरू किया, जिसका अर्थ है कि आप import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' कर सकते हैं। यह इस मुद्दे पर कुछ मदद कर सकता है।

हम वर्तमान में इन भागों की फाइलों को और अधिक स्टैंडअलोन बनाने पर भी काम कर रहे हैं, जिससे ट्री शेकिंग क्षमताओं में सुधार होना चाहिए। इसे कब प्रकाशित किया जाएगा, इसके लिए एक अच्छा ईटीए देना फिलहाल थोड़ा मुश्किल है, लेकिन जैसे ही मुझे कुछ और पता चलेगा मैं आपको अपडेट रखूंगा।

नमस्ते,

मैं केवल 'स्टॉक चार्ट' प्रकार का उपयोग कर रहा हूं और उसी समस्या में भाग गया, लेकिन यहां वर्णित समाधान मिला:
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';

अब बंडल में, यह इस तरह दिखता है:

मैं हाईचार्ट्स-रिएक्शन का उपयोग कर रहा हूं जो आयात * सिंटैक्स का उपयोग करता है। मैं अभी भी हार नहीं मान रहा हूं लेकिन मैं अब तक इसके लिए काम करने वाले पेड़ को हिलाने में असमर्थ रहा हूं।

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

मेरा वर्तमान समाधान: एलियास हाईचार्ट्स मॉड्यूल हाईस्टॉक मॉड्यूल में।

आप चार्ट प्रकार (हाईचार्ट्स/हाईस्टॉक) दोनों का उपयोग कर सकते हैं और यह बंडल आकार को कम करता है ।

यह वेबपैक के साथ किया जा सकता है (अधिक जानकारी के लिए वेबपैक दस्तावेज़ में "resolve.alias" जांचें):

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

आप (बेबेल-प्लगइन-मॉड्यूल-रिज़ॉल्वर) के लिए कोलाहल के साथ अलियासिंग कर सकते हैं।

अच्छा होगा अगर हम पूरे lib को मॉड्यूलर कर सकें।

ध्यान दें कि हाईस्टॉक को 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'
  },

इस पर किसी भी अद्यतन ? हाईचार्ट्स को छोड़ने पर विचार करना क्योंकि यह वास्तव में मेरे प्रोजेक्ट में आयात करने के लिए एक बड़ी लाइब्रेरी है :(

हाय @ योहंडा! हम लगभग आधे रास्ते पर हैं, जैसा कि आप 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/