Apache EChartsの公式ウェブサイトをご覧ください

https://echarts.dokyumento.jp
公式ウェブサイトにアクセス
x

よくある質問

よくある質問

Apache EChartsTM

トピック

    一般的な質問

    技術的な問題が発生した場合の対処法

    1) 質問する前に、オプションマニュアルの左側のナビゲーションを読むことをお勧めします。オプションマニュアルでは、EChartsにどのような設定項目があるかを確認できます。また、関連コンポーネントの下に、必要な機能を実装できる設定項目があるかどうかを確認できます。

    2) このページのよくある質問を参照してください。

    3) 公式エディター、CodePen、CodeSandbox、またはJSFiddleで、問題を再現するための簡単な例を作成してください。コードで要件を説明できない場合は、デザインドラフトを提供するか、スケッチを描いてみてください。

    4) stackoverflowで質問し、例のリンクを添付してください。

    EChartsは無料で使用できますか？

    はい、EChartsはApache License 2.0の下でオープンソース化されています。

    軸

    軸ラベルのスペースが足りない場合はどうすればよいですか？

    intervalを使用して、表示されるラベルの数を制御できます。すべてのラベルを表示するには、0に設定します。

    または、axisLabel.rotateを設定して、ラベルを特定の角度で回転させることができます。

    軸を右側に配置しようとすると、なぜ機能しないのですか？

    onZeroをfalseに設定する必要があります。

    軸の最初/最後のラベルを強制的に表示するにはどうすればよいですか？

    EChartsバージョン3.5.2以降、axisLabel.showMinLabelとaxisLabel.showMaxLabelの両方がサポートされています。最初/最後のタグを強制的に表示するかどうかを制御するために使用できます。

    凡例

    凡例領域がチャートに重なっている場合はどうすればよいですか？

    gridを設定して、チャート領域の位置を制御できます。たとえば、grid.topを大きく設定して描画領域を下に移動します。

    将来のバージョンでは、レイアウトをよりスマートにする予定です。

    折れ線グラフ

    座標軸の目盛りがデータと異なって見えるのはなぜですか？

    stackを設定しているかどうかを確認してください。積み上げ折れ線グラフを作成したくない場合は、削除する必要があります。

    棒グラフ

    値が小さい場合、なぜY軸のスケールが消えるのですか？

    EChartsバージョン3.5でこの問題は修正されました。

    マップチャート

    州の名前がチャートに重なっています。名前の場所を変更するにはどうすればよいですか？

    マップファイル（JSまたはJSON）で対応する州のcp座標を変更するか、echarts.getMap('china')によってロードされたマップデータを変更できます。

    詳細については、GitHubを参照してください。

    他の国の地図はどこからダウンロードできますか？

    他の国の地図情報は、こちらからダウンロードできます。

    マップのズームイベントを取得するにはどうすればよいですか？

    まず、シリーズのroamをtrueに設定し、次に'georoam'イベントをリッスンする必要があります。例えば

    myChart.on('georoam', function (params) {
   console.log(params);
});

    カスタムマップを作成するにはどうすればよいですか？

    EChartsマップは、元の座標から追加でエンコードされています。mapshaper-plusツールを使用して、カスタムgeojsonファイルをアップロードし、Echartsで使用できるマップファイルを生成できます。

    百度地図

    EChartsを百度地図と組み合わせて使用するにはどうすればよいですか？

    1. echarts.js、bmap.js、およびhttps://api.map.baidu.com/api?v=3.0&ak=百度開発プラットフォームで取得したアクセスキーを含めます。
    2. optionでbmapを設定します。この例を参照できます。
    3. 百度地図インスタンスを取得する必要がある場合は、chart.getModel().getComponent('bmap').getBMap()を使用し、百度地図APIに基づいて設定を行うことができます。

    ゲージチャート

    ダッシュボードの色を設定するにはどうすればよいですか？

    axisLine.lineStyle.colorを使用できます。

    イベント処理

    チャートのクリックなどのイベントを取得するにはどうすればよいですか？

    公式チュートリアルをお読みください。EChartsでサポートされているイベントの種類は、関連APIにあります。

    その他

    チャートが表示されないのはなぜですか？

    以下の状況を確認できます。

    • echarts.jsが正常にロードされているかどうか。
    • echarts変数が存在するかどうか。
    • echarts.initを呼び出すときに、DOMコンテナーに幅または高さがあるかどうか。

    VueでEChartsを使用すると、チャートが正しく機能しないのはなぜですか？

    • Vue 3を使用している場合は、reactiveとrefの使用を避けてください。
    • Vue 2を使用している場合は、data関数でEChartsインスタンスオブジェクトを宣言したり、Vue.observable APIを使用したりしないでください.

    上記はすべて、EChartsインスタンスオブジェクトがリアクティブオブジェクトとしてプロキシされる原因となり、EChartsの内部モデルのプロパティへのアクセスに影響を与え、予期しない問題やパフォーマンスの低下を引き起こす可能性があります。

    EChartsインスタンスオブジェクトを通常の変数として宣言するか、`shallowRef` / `shallowReactive` / `markRaw` APIを使用して、インスタンスオブジェクトがプロキシされないようにすることをお勧めします。

    #17723 と Vueドキュメントの使用方法に関する注意事項も参照してください。

    EChartsを学ぶためのリソースは他にもありますか？

    関連プロジェクトとリソースの詳細については、awesome-echartsを参照してください。