コンテンツにスキップ

CHART()

構文: CHART(chartOption() [,size()] [, theme()] [, chartJSCode()]) Since v8.0.8

オプション

chartOption()

構文: chartOption( { Apache EChartsのオプションJSON } )

chartJSCode()

構文: chartJSCode( { ユーザー定義のJavaScriptコード } )

size()

構文: size(width, height)

  • width string: チャートの幅(例:'800px'
  • height string: チャートの高さ(例:'800px'

theme()

構文: theme(name)

  • name string: テーマ名

チャートにテーマを適用します。使用できるテーマは whitedarkchalkessosinfographicmacaronspurple-passionromaromanticshinevintagewaldenwesteroswonderland です。各テーマのプレビューは後述のセクションを参照してください。

plugins()

構文: plugins(plugin...)

  • plugin string: 定義済みのプラグイン名、またはプラグインモジュールのURL
定義済みプラグインモジュールのパス
liquidfill/web/echarts/echarts-liquidfill.min.js
wordcloud/web/echarts/echarts-wordcloud.min.js
gl/web/echarts/echarts-gl.min.js

新しい CHART() 関数では、詳細な設定によりさまざまな可視化を実現できます。従来の CHART_LINE()CHART_BAR()CHART_SCATTER()CHART_LINE3D()CHART_BAR3D()CHART_SCATTER3D() 関数を置き換えます。

折れ線グラフ

棒グラフ

円グラフ

散布図

レーダーチャート

ゲージ

ローソク足チャート

箱ひげ図

GeoJSON

ヒートマップ

水位グラフ

3D地球儀

3D棒グラフ

3D折れ線グラフ

その他

テーマ

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
FAKE( arrange(1, 100, 1))
MAPVALUE(1, sin(2 * PI * 5 * value(0)/100) )
MAPVALUE(2, sin(2 * PI * 5 * (value(0)+5)/100) )
MAPVALUE(3, sin(2 * PI * 5 * (value(0)+10)/100) )
CHART(
    size("500px", "200px"),
    theme("dark"),
    chartOption({
        title:{ text:"theme(dark)" },
        xAxis:{ data:column(0), axisLabel:{show: false} },
        yAxis:{},
        series:[
            {type:"line", data:column(1), name:"series1"},
            {type:"line", data:column(2), name:"series2"},
            {type:"line", data:column(3), name:"series3"},
        ],
        legend:{ bottom: 10 }
    })
)

以下の画像は、各テーマを適用したチャートの例です。

white

dark

chalk

essos

infographic

macarons

purple-passion

roma

romantic

shine

vintage

walden

westeros

wonderland

最終更新日