amCharts에서 데이터의 사용자 정의 색을 설정할 수있는 방법

Question

내 그래픽으로 stanadart 데이터 양식을 가지고 있습니다.

var data = [ 
    {"product": "Laptop", "sellOfMonth": 250}, 
    {"product": "Phone", "sellOfMonth": 1250}, 
    {"product": "Comupter", "sellOfMonth": 20} 
]; 

내 데이터 값은 내 판매 값입니다. 그리고 다음과 같이이 데이터의 스타일을위한 새로운 배열이 있습니다.

var styles = [{"name":"sellOfMonth", "color": "#123"}]; 

이 스타일은 기둥 형 차트의 색상이됩니다.

내 데이터가 쌓인 경우 :

var data = [ 
    {"product": "Laptop", "sellOfMonth": 250, "sellOfYear": 2500}, 
    {"product": "Phone", "sellOfMonth": 1250, "sellOfYear": 1500}, 
    {"product": "Comupter", "sellOfMonth": 20,, "sellOfYear": 200} 
]; 

및 스타일의 배열은 다음과 같습니다

이

var styles = [ 
     {"name":"sellOfMonth", "color": "#123"}, 
     {"name":"sellOfYear", "color": "#dfc"} 
]; 

그래서 내가 amchart을 만들어 내 data 배열로의 dataProvider를 설정할 수 있습니다.

하지만 색상을 설정할 수 없습니다.

Answer 1

스타일을 설정하는 방법을 살펴보면 해당 스타일을 사용하여 graphs 배열을 만들고 각 그래프의 fillColors 속성을 원하는 색상으로 설정할 수 있습니다. 라이브러리의 클래스 기반 방법을 사용하는 경우

var graphs = styles.map(function(style) { 
    return { 
    "type": "column", 
    "valueField": style.name, 
    "fillColors": style.color, 
    "lineColor": style.color, 
    "fillAlphas": .8 
    }; 
}); 

거기에서 makeChart로 그래프 배열 또는 객체의 graphs 배열을 할당 할 수 있습니다. 아래

데모 : 유용한 도움을

var styles = [ 
 
     {"name":"sellOfMonth", "color": "#123"}, 
 
     {"name":"sellOfYear", "color": "#dfc"} 
 
]; 
 
var graphs = styles.map(function(style) { 
 
    return { 
 
    "type": "column", 
 
    "valueField": style.name, 
 
    "fillColors": style.color, 
 
    "lineColor": style.color, 
 
    "fillAlphas": .8 
 
    }; 
 
}); 
 
var data = [ 
 
    {"product": "Laptop", "sellOfMonth": 250, "sellOfYear": 2500}, 
 
    {"product": "Phone", "sellOfMonth": 1250, "sellOfYear": 1500}, 
 
    {"product": "Comupter", "sellOfMonth": 20, "sellOfYear": 200} 
 
]; 
 

 
var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "valueAxes": [{ 
 
    "stackType": "regular" 
 
    }], 
 
    "dataProvider": data, 
 
    "graphs": graphs, 
 
    "categoryField": "product" 
 
});

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 

 
#chartdiv { 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="//www.amcharts.com/lib/3/themes/light.js"></script> 
 

 
<div id="chartdiv"></div>