Apache ECharts 5.6 リリース

 (echarts.apache.org)
11 ポイント 投稿者 GN⁺ 2025-04-09 | 2件のコメント | WhatsAppで共有
  • Apache ECharts は、Web 上で可視化をすばやく実装できるオープンソースの JavaScript 可視化ライブラリ
  • 20種類以上のチャートタイプと複数のコンポーネントを組み合わせられるため、ダッシュボードや分析画面を柔軟に構成できる
  • Canvas と SVG の切り替え、段階的レンダリング、ストリーム読み込みにより、1,000万件のデータのリアルタイムレンダリングをサポート
  • データセットベースの管理と、フィルタリング、クラスタリング、回帰などのデータ変換により、多次元分析のフローに活用できる
  • 自動生成されるチャート説明とデカールパターンを提供し、アクセシビリティを必要とするユーザーでもチャートの内容や文脈を理解しやすい

Apache ECharts の概要

  • Apache ECharts はオープンソースの JavaScript 可視化ライブラリ
  • 公式サイトは https://echarts.apache.org で確認できる
  • ホームページでは Apache ECharts 6.1 の公開とあわせて changelog の案内がある
  • 入門資料とサンプルは Get Started, Demo で提供されている

機能構成

  • チャートとコンポーネント

    • 標準で提供されるチャートタイプは 20種類以上
    • 約12種類のコンポーネントも提供され、各要素を任意に組み合わせて利用できる

  • レンダリングと大規模データ

    • Canvas と SVG レンダリングを簡単に切り替えられる
    • 段階的レンダリングとストリーム読み込みにより、1,000万件のデータをリアルタイムでレンダリングできる

  • データ分析

    • データセットでデータを管理する
    • フィルタリング、クラスタリング、回帰などのデータ変換をサポートし、同じデータを多次元で分析できる

  • ビジュアルデザイン

    • 基本デザインは可視化の原則に従っている
    • レスポンシブデザインをサポートし、柔軟な設定でカスタマイズできる

  • コミュニティと拡張

    • 活発なオープンソースコミュニティがプロジェクト開発を継続している
    • 多様なサードパーティ拡張も提供されている

  • アクセシビリティ

    • 自動生成されるチャート説明を提供する
    • デカールパターンにより、障害のあるユーザーがチャートの内容や文脈を理解する助けになる

引用資料とコミュニティチャネル

  • ECharts ユーザーは、R&D プロジェクト、製品、研究論文、技術レポート、ニュース、書籍、発表、教育、特許などの関連活動で論文を引用できる
  • 引用対象の論文は Visual Informatics, 2018 PDF として提供されている
  • 更新チャネルとして GitHub、WeChat、Weibo、X アカウントが案内されている

関連記事

2件のコメント

 
jhk0530 2025-04-09

ECharts はきれいで、なかなか良いです。個人的には highcharts より使いやすかったです。
 
GN⁺ 2025-04-09
Hacker News の意見

  • Briefer（https://briefer.cloud）を作る中で、ほぼあらゆる可視化ライブラリを試したが、自信を持って Apache ECharts が最高だと言える
    他のライブラリはたいてい見た目が悪いか、命令型で扱う必要があって使いにくいか、柔軟性に欠けていた
    ECharts はデフォルトのデザインが美しく、バックエンドで宣言的なグラフ仕様を計算してから、フロントエンドにはレンダリングする仕様だけを送ることができ、従来の BI ツールが行うほぼすべてをサポートできるほど柔軟
    新機能のためにライブラリを拡張しなければならなかったことはなく、必要なものはすでに全部入っていた

    • それだけでなく、ECharts はプロジェクトの依存関係の中で、アップグレードしても壊れる心配がほとんどない、ほぼ唯一のライブラリだった
      3.x から 5.x へのアップグレードのときも npm update だけで引き続き問題なく動作し、最近では珍しいほど信頼感が大きい
      SSR と SPA の両方によく合い、大部分が純粋な JavaScript なので、React/Vue/Alpine だけでなく Rails/ASP.NET/PHP のような従来型のサーバーレンダリングアプリでもスムーズに動く
      https://www.jitbit.com/ のような典型的な SSR アプリで、サーバー側の LINQ クエリからチャートの JSON オブジェクトを作って ECharts に渡せるし、Vue ベースの SPA のリアクティブオブジェクトを渡してもそのままうまくいく
      円グラフのツールチップに太字のパーセント表示を出すような回避策が必要になっても、ソースを掘り下げることはほとんどなく、たいていはすでに解決策があり、検索や LLM で簡単に見つけられる
    • 数年前に見たような気がするが、結局 Chart.js を選んだし、妙な一回限りのカスタム作業でも、今までできなかったことはほとんどない
      ビジネス分析には Metabase サーバーを自前でホスティングしている
      Metabase に可視化の選択肢がもっと多いとよいとは思うが、モデルとクエリの設定が非常に簡単なので、カスタムチャートを作るほど正当化される要望はあまり来ない
    • 最近、Y 軸の各ステップが色を表し、隣接する色と混ざる必要がある グラデーション折れ線チャート が必要になったが、いくつか試した後で ECharts だけが妥当だった
      最初は明確な React 統合が不足しているのでためらったが、他の JavaScript ライブラリと同じように結局簡単に使え、期待以上によかった
    • その評価には同意しがたく、https://plotly.com/javascript/ も非常によい
      https://observablehq.com/plot/ も継続して見ているが、本当に素晴らしい方向へ進んでいるように思う
    • 実装方法がかなり似ているように見えるが、Chart.js よりどの点が優れているのか気になる

  • go-echarts https://github.com/go-echarts/go-echarts もおすすめできる
    Go の型でチャートを宣言すると、Go の JSON マーシャラーが自動的に JSON にバインドしてくれる。複数のプロジェクトで使ってみたが、Issue や PR が上がるとメンテナーが素早く反応していた
    JavaScript 関数と SQL クエリを Go に埋め込む方式がおもしろく、データ・SQL・Go・JavaScript が妙に混ざり合う
    DuckDB からデータを取得し、JavaScript ツールチップ付きのローソク足チャートファイルを生成する Go の例はこちら: https://github.com/NimbleMarkets/dbn-duckduck-goose/blob/mai...

    • Go と DuckDB をよく使っているが、これまではチャート用に不格好な JavaScript/html/template の組み合わせを使ってきた
      これはいじって遊ぶのによさそう

  • ECharts が現存する最高のものだと思う
    なぜかチャートライブラリの一覧や検索結果にはあまり出てこないが、chart.js、Google Charts、amCharts、Highcharts、ApexCharts をすべて試した後で、我々のツール/ライブラリ https://docs.chartsql.com/ で使っている

    • 中国のプロジェクトだからだと思う
      Ant Design Components も本当に素晴らしいが、知られてしかるべきほどには知られていない
    • D3.js はどうなのか気になる
      D3.js が低レベルなのは分かっているが、AI があればかなり簡単になる
    • 制御の自由度が高いので VisX が好き
    • Plotly が好き

  • 複数のライブラリを試した後、昨年チームで Apache ECharts に落ち着き、後悔していない
    ドキュメントが素晴らしく、性能がよく、設定の自由度が高い一方で使いやすく、棒・積み上げ棒・地図・ズーム/スクロール可能な時系列・散布図など、必要なあらゆるチャート種別をサポートしている

    • ag-grid のチャートと比べるとどうなのか気になる

  • ラインレース が本当に格好よく見える
    https://echarts.apache.org/examples/en/editor.html?c=line-ra...
    スイッチを入れるとレースが始まる
    付け加えると、ノルウェーはよくやった

    • 見た目はすっきりしているが、他の人が言及した Hans Rosling の例とは違って、このアニメーションは追加情報を与えていない
      最後のフレームだけを見せても同じメッセージをはるかに速く、アクセシブルに伝えられるし、一種の チャートジャンク だ
      https://en.wikipedia.org/wiki/Chartjunk
    • Hans Rosling の功績とすべきだろう: https://www.youtube.com/watch?v=hVimVzgtD6w（2003）
    • 何かずれている
      データは life-expectancy-table.json のように見えるが、タイトルは Income を指している
      どこでミスが起きたのか分からない
    • 「ノルウェーはよくやった」という部分が 原油価格 とどれくらい相関しているのか気になる

  • Webクライアント向けのチャートライブラリを探しているなら、charts.cssもおすすめ
    正直救世主みたいな存在で、考え方がほとんどのチャートライブラリよりずっと単純なのに、同じものを作れる
    昔ながらのサーバーサイドレンダリングや htmx などにとても簡単に組み込める
    https://chartscss.org/

    • 似た系統では、JavaScriptで補強された https://pancake-charts.surge.sh/ が昔から気に入っている
      NYTのグラフィックチームが開発し、COVID-19のチャートで使われた
    • Chart.cssは、折れ線グラフを描ける数多くのライブラリの一つに近く、EChartsとはまったく別世界
    • 「同じものを作れる」というのは、EChartsのデモや、有料の amCharts のデモ https://www.amcharts.com/demos を見たことがあるのか疑問
      charts.css自体に反感はないが、子ども向けのプラスチック玩具と本物のスペースシャトルを比較しているような感じ
      業務時間の大半を Apache Superset のような重いビジネス分析アプリの開発に使っているが、chart.cssのようなものでは実装不可能
    • 他の返信と同じく、EChartsのほうがはるかに多くの機能を提供することには同意するが、意味のあるデータテーブルをチャートに変換するという方式はかなり良さそう
      EChartsには満足して使っているものの、データテーブルの全行にスパークラインが必要な箇所では、EChartsインスタンスをあまりに多く作らなければならない
      そういう用途なら、このライブラリはよく合いそう
    • chartscssのアニメーション例は煩わしく、機能面でもあまり良さそうには見えない

  • 名前に Apache を付けたままにしておくほうがよさそう
    「ECharts, JSチャートパッケージ」と言われると1年以内にメンテナンスが止まりそうだが、「Apache ECharts, JSチャートパッケージ」と言われると来年も維持されていそうに思える

    • 興味深いことに、まったく逆に感じる
      Apacheが付いているのを見ると、開発が止まっていてレガシーか、保守だけのプロジェクトだと想定してしまう
      「Apacheはプロジェクトが死にに行く場所」という言い方もある

  • EChartsが正当に評価されているのを見るのはうれしい
    現存する最高のオープンソース可視化ライブラリと言っても過言ではない
    基本的に Canvas を使うので、私が使ったどのライブラリよりも速く、グラフ上にカスタムツールチップのようなウィジェットを自分で重ねられるほど柔軟
    レンダリングされたチャート内の特定の点の位置といったメタデータも多く提供してくれるのでコードから活用しやすく、レガシーWebアプリに持ち込んで使うのにも非常に向いており、サイトからカスタムビルドを取得できるオプションも提供している
    ストリーミングデータの処理にも優れていて、データ変更間のアニメーションがとても滑らか
    ほぼ7年にわたって複数の本番環境や個人プロジェクトで使ってきたが、今でも第一候補で、ドキュメントもその間に大きく改善された
    ログスケールで0を扱う問題のような古いバグが鬱陶しいことはあるが回避策はあり、一般的なユースケースで行き詰まるようなバグはほとんど見たことがない

    • チャートライブラリ比較でなぜこんなに滅多に見かけないのか分からない
      JavaScriptチャートライブラリのWikipediaページにも載っておらず、Apache Supersetを通じて偶然知った

  • 手早く試したWebデモでは、このライブラリだけが GraphGL コンポーネントで非常に大きなグラフをインタラクティブに表示・操作できた
    よく知られた可視化ライブラリではないようだが、かなり興味深い

  • React/React Native向けのチャートライブラリをちょうど見ていたところだが、Apache EChartsはクロスプラットフォームのデータ可視化候補として良さそう
    調べた react-echarts（https://github.com/hugocxl/react-echarts）と react-native-echarts（https://github.com/wuba/react-native-echarts）はいずれも活発に開発されているようで、Apache配下である点も今後の開発見通しとメンテナンスの面で大きな利点