コンテンツにスキップ

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: テーマ名

チャートにテーマを適用します。使用できるテーマは white、dark、chalk、essos、infographic、macarons、purple-passion、roma、romantic、shine、vintage、walden、westeros、wonderland です。各テーマのプレビューは後述のセクションを参照してください。

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
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

最終更新日