如何在amCharts中设置数据的自定义颜色

Question

我的图形中有一个stanadart数据表。

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

对于我的数据，我的数据值是sellOfMonth属性。我有一个新的数据样式数组，如下所示：

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并将dataProvider设置为我的data数组。

但是我无法设置颜色。

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 {
	width: 100%;
	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>