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

debugcn 发表于 Dev

巴特尔瘤

我的图形中有一个标准的数据表单。

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数组。

但我无法设置颜色。

xorspark

查看您的样式是如何设置的，您可以轻松地使用它来创建graphs数组并将每个图形的fillColors属性设置为所需的颜色。

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

graphs如果您使用库的基于类的方法，您可以从那里将您的图形数组分配给 makeChart 或对象的数组。

演示如下：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。