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

巴特尔瘤

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

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在amCharts柱形图中设置自定义颜色?

来自分类Dev

如何在图表中设置自定义填充颜色

来自分类Dev

如何自定义amcharts的深度图?

来自分类Dev

如何在amcharts的序列图中添加自定义y轴标签?

来自分类Dev

如何在amcharts中设置我的pieChart容器的高度?

来自分类Dev

如何在AmCharts中访问嵌套的Json数据

来自分类Dev

如何在amcharts v4中通过json配置手动设置LineSeries的颜色?

来自分类Dev

如何在amCharts中单击时设置柱形图的颜色?

来自分类Dev

如何更改 amcharts 中的标签文本颜色

来自分类Dev

amCharts:如何在图表标题中设置字体系列?

来自分类Dev

如何在AmCharts的值轴上设置顺序整数步?

来自分类Dev

如何在amCharts中创建分组的条形图?

来自分类Dev

如何在amCharts中水平显示y轴标题?

来自分类Dev

如何在amcharts中添加多个图形

来自分类Dev

如何在VS 2013中为HTML尖括号设置自定义颜色?

来自分类Dev

如何在VS 2013中为HTML尖括号设置自定义颜色?

来自分类Dev

如何在自定义类型的UIButton中设置图像视图的颜色?

来自分类Dev

如何在视图控制器的背景中设置自定义颜色

来自分类Dev

如何在 Flutter 中为自定义画家的颜色设置动画?

来自分类Dev

AMCharts甜甜圈图颜色渐变自定义

来自分类Dev

如何更改 amcharts 中标题框的颜色

来自分类Dev

如何自动设置 amCharts 堆叠列样式颜色

来自分类Dev

amCharts:如何使用外部自定义按钮而不是图例来切换系列

来自分类Dev

amcharts中的指南:如何在amcharts中使用前缀来表示磁盘使用情况:1024与1000

来自分类Dev

如何在C#中制作自定义颜色?

来自分类Dev

如何在C#中制作自定义颜色?

来自分类Dev

如何在python中自定义颜色条?

来自分类Dev

如何使用在matplotlib中设置的自定义数字来自定义栏中的颜色?

来自分类Dev

如何更改amCharts TreeMap中较深层项目的颜色?

Related 相关文章

  1. 1

    如何在amCharts柱形图中设置自定义颜色?

  2. 2

    如何在图表中设置自定义填充颜色

  3. 3

    如何自定义amcharts的深度图?

  4. 4

    如何在amcharts的序列图中添加自定义y轴标签?

  5. 5

    如何在amcharts中设置我的pieChart容器的高度?

  6. 6

    如何在AmCharts中访问嵌套的Json数据

  7. 7

    如何在amcharts v4中通过json配置手动设置LineSeries的颜色?

  8. 8

    如何在amCharts中单击时设置柱形图的颜色?

  9. 9

    如何更改 amcharts 中的标签文本颜色

  10. 10

    amCharts:如何在图表标题中设置字体系列?

  11. 11

    如何在AmCharts的值轴上设置顺序整数步?

  12. 12

    如何在amCharts中创建分组的条形图?

  13. 13

    如何在amCharts中水平显示y轴标题?

  14. 14

    如何在amcharts中添加多个图形

  15. 15

    如何在VS 2013中为HTML尖括号设置自定义颜色?

  16. 16

    如何在VS 2013中为HTML尖括号设置自定义颜色?

  17. 17

    如何在自定义类型的UIButton中设置图像视图的颜色?

  18. 18

    如何在视图控制器的背景中设置自定义颜色

  19. 19

    如何在 Flutter 中为自定义画家的颜色设置动画?

  20. 20

    AMCharts甜甜圈图颜色渐变自定义

  21. 21

    如何更改 amcharts 中标题框的颜色

  22. 22

    如何自动设置 amCharts 堆叠列样式颜色

  23. 23

    amCharts:如何使用外部自定义按钮而不是图例来切换系列

  24. 24

    amcharts中的指南:如何在amcharts中使用前缀来表示磁盘使用情况:1024与1000

  25. 25

    如何在C#中制作自定义颜色?

  26. 26

    如何在C#中制作自定义颜色?

  27. 27

    如何在python中自定义颜色条?

  28. 28

    如何使用在matplotlib中设置的自定义数字来自定义栏中的颜色?

  29. 29

    如何更改amCharts TreeMap中较深层项目的颜色?

热门标签

归档