11 पॉइंट द्वारा GN⁺ 2025-04-09 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • Apache ECharts वेब पर विज़ुअलाइज़ेशन को तेज़ी से लागू करने वाली एक open source JavaScript visualization library है
  • 20 से अधिक chart types और कई components को मिलाकर इस्तेमाल किया जा सकता है, इसलिए dashboard और analytics screens बनाना काफ़ी लचीला है
  • Canvas और SVG switching, progressive rendering, और stream loading के ज़रिए 1 करोड़ data points का real-time rendering सपोर्ट करता है
  • dataset-आधारित management और filtering, clustering, regression जैसी data transforms के साथ इसे multidimensional analysis workflows में उपयोग किया जा सकता है
  • अपने-आप जनरेट होने वाले chart descriptions और decal patterns उपलब्ध कराता है, जिससे accessibility की ज़रूरत वाले उपयोगकर्ताओं के लिए chart की सामग्री और संदर्भ समझना आसान होता है

Apache ECharts परिचय

  • Apache ECharts एक open source JavaScript visualization library है
  • आधिकारिक साइट https://echarts.apache.org पर देखी जा सकती है
  • होमपेज पर Apache ECharts 6.1 जारी होने के साथ changelog देखने का मार्गदर्शन दिया गया है
  • शुरुआत के लिए सामग्री और उदाहरण Get Started, Demo में उपलब्ध हैं

फ़ीचर संरचना

  • charts और components

    • डिफ़ॉल्ट रूप से 20 से अधिक chart types उपलब्ध हैं
    • लगभग 12 components भी दिए जाते हैं, और हर element को मनचाहे तरीके से मिलाकर इस्तेमाल किया जा सकता है
  • rendering और बड़े पैमाने का data

    • Canvas और SVG rendering के बीच आसानी से स्विच किया जा सकता है
    • progressive rendering और stream loading के साथ 1 करोड़ data points को real-time में render किया जा सकता है
  • data analysis

    • data को dataset के ज़रिए manage किया जाता है
    • filtering, clustering, regression जैसी data transforms को सपोर्ट करता है, जिससे एक ही data का multidimensional analysis किया जा सकता है
  • visual design

    • default design visualization principles का पालन करता है
    • responsive design को सपोर्ट करता है और flexible settings के साथ customization किया जा सकता है
  • community और विस्तार

    • एक सक्रिय open source community इस project के development को लगातार आगे बढ़ाती है
    • विभिन्न third-party extensions भी उपलब्ध हैं
  • accessibility

    • अपने-आप chart descriptions जनरेट करता है
    • decal patterns के ज़रिए disabilities वाले उपयोगकर्ताओं को chart की सामग्री और संदर्भ समझने में मदद मिलती है

उद्धरण सामग्री और community channels

  • ECharts उपयोगकर्ता R&D projects, products, research papers, technical reports, news, books, presentations, education, patents जैसी संबंधित गतिविधियों में paper को उद्धृत कर सकते हैं
  • उद्धृत किया जाने वाला paper Visual Informatics, 2018 PDF के रूप में उपलब्ध है
  • updates के लिए GitHub, WeChat, Weibo, और X account channels बताए गए हैं

2 टिप्पणियां

 
jhk0530 2025-04-09

ECharts सुंदर है और ठीक-ठाक भी। मेरी नज़र में, इसे highcharts से ज़्यादा आसानी से इस्तेमाल किया जा सका।

 
GN⁺ 2025-04-09
Hacker News की राय
  • Briefer(https://briefer.cloud) बनाते समय लगभग हर visualization library आज़माई, और पूरे भरोसे से कह सकता हूं कि Apache ECharts सबसे अच्छी है
    बाकी libraries आम तौर पर या तो दिखने में खराब थीं, या imperative तरीके से handle करनी पड़ती थीं इसलिए इस्तेमाल मुश्किल था, या उनमें flexibility कम थी
    ECharts का default design सुंदर है, backend में declarative graph specification calculate करने के बाद frontend को सिर्फ render करने वाली specification भेजी जा सकती है, और यह इतनी flexible है कि पारंपरिक BI tools जो लगभग सब कुछ करते हैं, उसे support कर सके
    नए features के लिए library को extend करने की जरूरत कभी नहीं पड़ी, जो चाहिए था वह पहले से ही मौजूद था

    • इतना ही नहीं, project dependencies में ECharts लगभग अकेली ऐसी library थी जिसे upgrade करने पर टूटने की चिंता नहीं रहती थी
      3.x से 5.x में upgrade करते समय भी सिर्फ npm update से सब कुछ ठीक चलता रहा, और आजकल के हिसाब से यह दुर्लभ रूप से भरोसेमंद लगती है
      SSR और SPA दोनों के लिए अच्छी तरह fit होती है, और ज्यादातर pure JavaScript होने के कारण React/Vue/Alpine के साथ-साथ Rails/ASP.NET/PHP जैसी पारंपरिक server rendering apps में भी smooth काम करती है
      https://www.jitbit.com/ जैसी typical SSR app में server की LINQ query से chart JSON object बनाकर ECharts को दिया जा सकता है, और Vue-based SPA के reactive object को pass करने पर भी वैसे ही ठीक चलता है
      pie chart tooltip में bold percentage दिखाने जैसे workaround की जरूरत पड़े तब भी source में गहराई से जाने की नौबत शायद ही आती है, और ज्यादातर solutions पहले से मौजूद हैं जिन्हें search या LLM से आसानी से ढूंढा जा सकता है
    • कुछ साल पहले इसे देखा था, लेकिन आखिरकार Chart.js चुना, और अजीब one-off custom कामों में भी अब तक ऐसा बहुत कम हुआ है जो यह न कर पाया हो
      business analytics के लिए Metabase server खुद host करते हैं
      अच्छा होता अगर Metabase में visualization options ज्यादा होते, लेकिन models और queries set करना इतना आसान है कि custom chart बनाने को justify करने वाली requests अक्सर नहीं आतीं
    • हाल ही में gradient line chart चाहिए था जिसमें Y-axis का हर step एक रंग दिखाए और पड़ोसी रंगों के साथ mix हो, और कुछ options आज़माने के बाद सिर्फ ECharts ही समझदारी वाला लगा
      शुरू में clear React integration की कमी के कारण झिझक थी, लेकिन दूसरी JavaScript libraries की तरह आखिरकार इसे आसानी से इस्तेमाल कर पाया और यह उम्मीद से बेहतर निकला
    • उस आकलन से सहमत होना मुश्किल है, और https://plotly.com/javascript/ भी बहुत अच्छा है
      https://observablehq.com/plot/ पर भी लगातार नजर रख रहा हूं, और लगता है यह सचमुच शानदार दिशा में जा रहा है
    • implementation style काफी मिलता-जुलता दिखता है, इसलिए जानना चाहता हूं कि Chart.js से बेहतर इसमें क्या है
  • go-echarts https://github.com/go-echarts/go-echarts भी recommend करने लायक है
    Go types से charts declare करने पर Go का JSON marshaller उन्हें अपने-आप JSON में bind कर देता है, और कई projects में इस्तेमाल किया है; issues या PR आने पर maintainer जल्दी response देते थे
    JavaScript functions और SQL queries को Go में embed करने का तरीका मजेदार है, और data·SQL·Go·JavaScript अजीब तरह से mix हो जाते हैं
    DuckDB से data लाकर JavaScript tooltip वाला candlestick chart file generate करने वाला Go example यहां है: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Go और DuckDB काफी इस्तेमाल करता हूं, लेकिन अब तक charts के लिए भद्दा JavaScript/html/template combo इस्तेमाल करता आया हूं
      यह experiment करने के लिए अच्छा लगता है
  • मेरे हिसाब से ECharts मौजूदा समय की सबसे अच्छी है
    अजीब है कि chart libraries की lists या search results में यह अक्सर नहीं दिखती, लेकिन chart.js, Google Charts, amCharts, Highcharts, ApexCharts सब आज़माने के बाद हम अपने tool/library https://docs.chartsql.com/ में इसका इस्तेमाल कर रहे हैं

    • शायद इसलिए कि यह Chinese project है
      Ant Design Components भी सचमुच शानदार हैं, लेकिन जितना जाने जाने चाहिए उतने जाने नहीं गए
    • सोच रहा हूं D3.js कैसा रहेगा
      पता है D3.js low-level है, लेकिन AI हो तो काफी आसान हो जाता है
    • control का level ज्यादा होने की वजह से VisX पसंद है
    • Plotly पसंद है
  • कई libraries आज़माने के बाद पिछले साल हमारी team ने Apache ECharts पर settle किया और कोई पछतावा नहीं है
    documentation बढ़िया है, performance अच्छी है, highly configurable होने के साथ इस्तेमाल में आसान है, और bar, stacked bar, maps, zoom/scroll हो सकने वाली time series, scatter plot जैसी जरूरत की हर chart type support करती है

    • ag-grid charts से compare करें तो यह कैसी है, जानना चाहता हूं
  • line race वाकई शानदार दिखती है
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    switch on करते ही race शुरू हो जाती है
    वैसे Norway ने अच्छा किया

    • देखने में neat है, लेकिन किसी और ने जिस Hans Rosling example का जिक्र किया, उसके उलट यह animation अतिरिक्त जानकारी नहीं देती
      सिर्फ final frame दिखाने से भी वही message कहीं ज्यादा जल्दी और accessible तरीके से दिया जा सकता है, और यह एक तरह का chart junk है
      https://en.wikipedia.org/wiki/Chartjunk
    • इसका credit Hans Rosling को देना चाहिए लगता है: https://www.youtube.com/watch?v=hVimVzgtD6w (2003)
    • कुछ गड़बड़ है
      data life-expectancy-table.json लगता है, लेकिन title Income की ओर इशारा करता है
      पता नहीं गलती कहां हुई
    • “Norway ने अच्छा किया” वाला हिस्सा oil prices से कितना correlate करता है, यह जानना चाहता हूं
  • अगर वेब क्लाइंट के लिए chart library ढूंढ रहे हैं, तो charts.css भी recommend करूंगा
    सच कहूं तो यह किसी savior जैसा है, और इसका concept ज़्यादातर chart libraries से कहीं ज़्यादा सरल है, फिर भी वही चीज़ें बनाई जा सकती हैं
    पुराने तरीके की server-side rendering, htmx वगैरह के साथ बहुत आसानी से जुड़ जाता है
    https://chartscss.org/

    • इसी तरह, JavaScript से enhance किया गया https://pancake-charts.surge.sh/ मुझे काफी समय से पसंद रहा है
      इसे NYT graphics team ने develop किया था और Covid charts में इस्तेमाल किया गया था
    • Chart.css उन कई libraries में से एक के करीब है जो line charts बना सकती हैं, और ECharts से यह पूरी तरह अलग दुनिया है
    • “वही चीज़ें बनाई जा सकती हैं” कहने पर शक होता है कि क्या आपने ECharts demos या paid amCharts demos https://www.amcharts.com/demos देखे हैं
      charts.css से मुझे कोई आपत्ति नहीं है, लेकिन यह बच्चों के plastic toy और असली Space Shuttle की तुलना जैसा लगता है
      मैं अपने काम के समय का ज़्यादातर हिस्सा Apache Superset जैसे भारी business analytics apps develop करने में लगाता हूं, और chart.css जैसी चीज़ से उन्हें implement करना संभव नहीं है
    • बाकी जवाबों की तरह मैं भी मानता हूं कि ECharts कहीं ज़्यादा features देता है, लेकिन meaningful data table को chart में बदलने का तरीका काफी अच्छा लगता है
      मैं ECharts से संतुष्ट हूं और इस्तेमाल करता हूं, लेकिन जहां data table की हर row में sparkline चाहिए, वहां बहुत ज़्यादा ECharts instances बनाने पड़ते हैं
      ऐसे use case के लिए यह library अच्छी fit लगती है
    • chartscss के animation examples परेशान करने वाले हैं, और functionality के लिहाज़ से भी खास अच्छे नहीं लगते
  • नाम में Apache लगा रहने देना बेहतर होगा
    “ECharts, JS chart package” कहें तो लगता है 1 साल के अंदर maintenance बंद हो जाएगी, और “Apache ECharts, JS chart package” कहें तो लगता है अगले साल भी maintained रहेगा

    • दिलचस्प है कि मुझे ठीक उल्टा महसूस होता है
      Apache लगा देख कर मान लेता हूं कि development रुक चुकी है और project legacy है या सिर्फ maintenance mode में है
      यह भी कहा जाता है कि “Apache वह जगह है जहां projects मरने जाते हैं”
  • अच्छा लग रहा है कि ECharts को उसका उचित recognition मिल रहा है
    इसे मौजूदा समय की सबसे अच्छी open-source visualization library कहना अतिशयोक्ति नहीं होगा
    यह default रूप से Canvas इस्तेमाल करता है, इसलिए मेरे इस्तेमाल की किसी भी library से तेज़ है, और इतना flexible है कि graph के ऊपर custom tooltip जैसे widgets खुद रख सकते हैं
    rendered chart के अंदर किसी खास point की position जैसी metadata भी काफी देता है, जिससे code में इस्तेमाल करना आसान होता है; legacy webapps में लाना भी बहुत अच्छा है, और site से custom build लेने का option भी देता है
    streaming data handling भी शानदार है, इसलिए data changes के बीच animations बहुत smooth होती हैं
    लगभग 7 साल से कई production और personal projects में इस्तेमाल कर रहा हूं और यह अब भी मेरी first choice है; documentation भी इस दौरान काफी बेहतर हुई है
    log scale में 0 को handle करने जैसी पुरानी bugs कभी-कभी परेशान करती हैं, लेकिन workarounds हैं, और common use cases में रोक देने वाली bugs मैंने शायद ही देखी हैं

    • समझ नहीं आता कि chart library comparisons में यह इतना कम क्यों दिखता है
      JavaScript chart library Wikipedia page पर भी नहीं है, और मुझे Apache Superset के जरिए संयोग से पता चला
  • एक quick web demo में सिर्फ इसी library के GraphGL component से बहुत बड़े graphs को interactively देख और manipulate कर पाया
    यह शायद बहुत well-known visualization library नहीं है, लेकिन काफी दिलचस्प है

  • मैं अभी React/React Native के लिए chart libraries देख ही रहा था, और Apache ECharts cross-platform data visualization के candidate के तौर पर अच्छा लगता है
    मैंने जो react-echarts(https://github.com/hugocxl/react-echarts) और react-native-echarts(https://github.com/wuba/react-native-echarts) देखे, दोनों actively developed लगते हैं, और Apache के तहत होना future development prospects और maintenance के लिहाज़ से भी बड़ा plus है