machbase-neo
TQL
CHART()

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() 함수를 대체합니다.

Line

Basic Line ChartBasic Line Chart Basic Area ChartBasic Area Chart Stacked Line ChartStacked Line Chart Stacked Area ChartStacked Area Chart Area PiecesArea Pieces Step LineStep Line Multiple X axesMultiple X axes Multiple Y axesMultiple Y axes Basic MixBasic Mix
Line and Bar Series
Large Area ChartLarge Area Chart
lttb downsampling
Data TransformData Transform Air PassengersAir Passengers Cartesian Coordinate SystemCartesian Coordinate System

Bar

Basic Bar ChartBasic Bar Chart Category BarCategory Bar
GROUP-by-lazy
Stacked Bar NormalizationStacked Bar Normalization
percentage normalize
Negative ValuesNegative Values Tangential Polar BarTangential Polar Bar Large Scale Bar ChartLarge Scale Bar Chart Bar raceBar race

Pie

Basic PieBasic Pie DoughnutDoughnut NightingaleNightingale

Scatter

Basic Scatter ChartBasic Scatter Chart Anscombe's quartetAnscombe's quartet 1M Points1M Points
1 million points

Radar

Basic RadarBasic Radar Custom RadarCustom Radar

Gauge

Basic GaugeBasic Gauge Speed GaugeSpeed Gauge Update GaugeUpdate Gauge

Candlestick

Basic CandlestickBasic Candlestick Stock IndexStock Index Dow-Jones IndexDow-Jones Index

Boxplot

Michelson-Morley ExperimentMichelson-Morley Experiment Iris Sepal LengthIris Sepal Length

GeoJSON

GEOJSON - SeoulGEOJSON - Seoul

Heatmap

Basic HeatmapBasic Heatmap
20K data
Discrete Mapping of ColorsDiscrete Mapping of Colors
20K data
Calendar HeatmapCalendar Heatmap
Year 2023

Liquidfill

Liquid FillLiquid Fill Multiple WavesMultiple Waves Still WavesStill Waves

3D Globe

Hello WorldHello World Airline on GlobeAirline on Globe

3D Bar

3D Bar with Dataset3D Bar with Dataset Stacked 3D BarStacked 3D Bar Transparent 3D BarTransparent 3D Bar

3D Line

Orthographic ProjectionOrthographic Projection

기타

Basic SankeyBasic Sankey Word CloudWord Cloud GEO SVG LinesGEO SVG Lines

Themes 

 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 }
    })
)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

SCRIPT({
    for( i = 1; i <= 100; i++) {
        $.yield(
            i,
            Math.sin(2 * Math.PI * 5 * i / 100),
            Math.sin(2 * Math.PI * 5 * (i + 5) / 100),
            Math.sin(2 * Math.PI * 5 * (i + 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

최근 업데이트