Incubator-echarts: ์ƒ‰์ƒ ์˜ต์…˜์ด ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2014๋…„ 11์›” 22์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: apache/incubator-echarts

์•ˆ๋…•ํ•˜์„ธ์š” ์—ฌ๋Ÿฌ๋ถ„, ์šฐ์„  - ECharts๋Š” ํ›Œ๋ฅญํ•ฉ๋‹ˆ๋‹ค. dataviz์—์„œ ๋‹ค์Œ์œผ๋กœ ์ค‘์š”ํ•œ ๊ฒƒ์€ ์—ฌ๋Ÿฌ๋ถ„์ด ์ข‹์•„ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค!

์ด์ œ ๋ฌธ์ œ - "์ƒ‰์ƒ" ์˜ต์…˜์„ ๋ณ€๊ฒฝํ•˜๊ณ  .setOption() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์ฐจํŠธ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ฑฐ๋‚˜ .refresh() ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ž‘๋™ํ•˜๋Š” ์œ ์ผํ•œ ๋ฉ”์„œ๋“œ๋Š” setTheme()์ž…๋‹ˆ๋‹ค. // ๋นˆ ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ์˜ค๋ฅ˜๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€๋งŒ ์ž‘์—…์€ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

์–ด์จŒ๋“ , ๋‹น์‹ ์˜ ๋…ธ๊ณ ์— ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค!

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋ฒ”๋ก€๊ฐ€ ๋ Œ๋”๋ง ํ›„ ์ƒ‰์ƒ ๊ณ„์—ด ๋งต์„ ์œ ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด ์˜ต์…˜์„ ์‹œ๋„ํ•˜๊ณ  ์„ค๋ช…์— ๋”ฐ๋ผ ์ƒ‰์ƒ์„ ๋ณ€๊ฒฝํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

option = {
    color: ['red','green'],
    series : [
      {
          type:'pie',
          data:[
            {name:1, value:10},
            {name:2, value:20}
          ]
      }
  ]
};

๊ทธ๋Ÿฌ๋‚˜ ๋ฒ”๋ก€๊ฐ€ ์‚ฌ์šฉ๋˜๋ฉด ๋ฒ”๋ก€์˜ API: setColor๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://echarts.baidu.com/doc/doc-en.html#LegendInterface ์ฐธ์กฐ, ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์ƒˆ ์ƒ‰์ƒ์œผ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์ง€์šฐ๋ ค๋ฉด false๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค. ' ๋ฒ”๋ก€์˜ ์ปฌ๋Ÿฌ ๋งต.

๋˜๋Š” setTheme๊ฐ€ ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . http://echarts.baidu.com/doc/example/line1.html# -en์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.
์ฝ˜์†”์—์„œ ์ด๊ฒƒ์„ ์‹œ๋„ํ•˜์‹ญ์‹œ์˜ค
myChart.setTheme({์ƒ‰์ƒ:['๋นจ๊ฐ„์ƒ‰','๋…น์ƒ‰']});
๋‹น์‹ ์€ ๋‹น์‹ ์˜ ํ•„์š”๋ฅผ ์ฐพ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์‚ฌ์‹ค ๊ท€ํ•˜์˜ ์ƒ‰์ƒ์€ ์ด๋ฏธ ์œ ํšจํ•˜์ง€๋งŒ echarts ์‹œ๋ฆฌ์ฆˆ์—๋Š” ์ ์šฉ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. ํ˜„์žฌ option.color๊ฐ€ ๊ฐ ์‹œ๋ฆฌ์ฆˆ์— ํ•ด๋‹นํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด์™€ ๊ด€๋ จํ•˜์—ฌ echarts๋„ ๋ณ€๊ฒฝ๋  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค. โ€”โ€” ์‹œ๋ฆฌ์ฆˆ์˜ ์ƒ‰์ƒ ์ˆœ์ฐจ ๊ฒฐ์ • ์ƒ‰์ƒ .

๋ฒ”๋ก€๊ฐ€ ๋ Œ๋”๋ง ํ›„ ์ƒ‰์ƒ ๊ณ„์—ด ๋งต์„ ์œ ์ง€ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด ์˜ต์…˜์„ ์‹œ๋„ํ•˜๊ณ  ์„ค๋ช…์— ๋”ฐ๋ผ ์ƒ‰์ƒ์„ ๋ณ€๊ฒฝํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

option = {
    color: ['red','green'],
    series : [
      {
          type:'pie',
          data:[
            {name:1, value:10},
            {name:2, value:20}
          ]
      }
  ]
};

๊ทธ๋Ÿฌ๋‚˜ ๋ฒ”๋ก€๊ฐ€ ์‚ฌ์šฉ๋˜๋ฉด ๋ฒ”๋ก€์˜ API: setColor๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. http://echarts.baidu.com/doc/doc-en.html#LegendInterface ์ฐธ์กฐ, ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์ƒˆ ์ƒ‰์ƒ์œผ๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ ์‹œ๋ฆฌ์ฆˆ๋ฅผ ์ง€์šฐ๋ ค๋ฉด false๋ฅผ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค. ' ๋ฒ”๋ก€์˜ ์ปฌ๋Ÿฌ ๋งต.

๋˜๋Š” setTheme๊ฐ€ ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ๋ฒ•์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค . http://echarts.baidu.com/doc/example/line1.html# -en์„ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค.
์ฝ˜์†”์—์„œ ์ด๊ฒƒ์„ ์‹œ๋„ํ•˜์‹ญ์‹œ์˜ค
myChart.setTheme({์ƒ‰์ƒ:['๋นจ๊ฐ„์ƒ‰','๋…น์ƒ‰']});
๋‹น์‹ ์€ ๋‹น์‹ ์˜ ํ•„์š”๋ฅผ ์ฐพ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ, myChart.setTheme({color:['red','green']}); ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

jxffly picture jxffly  ยท  3์ฝ”๋ฉ˜ํŠธ

wm370857724 picture wm370857724  ยท  3์ฝ”๋ฉ˜ํŠธ

marine1ly picture marine1ly  ยท  3์ฝ”๋ฉ˜ํŠธ

akvaliya picture akvaliya  ยท  3์ฝ”๋ฉ˜ํŠธ

yj20060714 picture yj20060714  ยท  3์ฝ”๋ฉ˜ํŠธ