amChartsでデータのカスタム色を設定するには

Question

私はグラフィックスからスタンダードデータフォームを持っています。

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>