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 λ“±κΈ‰