javascript - Amcharts 将柱形条设置为特定颜色不起作用
问题描述
我正在使用amcharts。我需要将列/栏颜色设置为特定颜色。
我尝试了很多尝试,例如:
"ColorField" : "color"
"FillColorField" : "color"
但没有什么对我有用。
我的JSFiddle
不确定,我错过了什么。任何建议将不胜感激!
解决方案
您可以为每个chartData2元素添加颜色属性。现在,您可以在图表选项中添加:
colorField": "color"
这意味着在绘制每个条形图时从 chartData2 获取颜色属性。
var chartData2 = [{
"month": "Apr 2018",
"peekValue": "60.5",
"averageValue": "33.40",
"color": "#ff0000",
"color1": "#008000"
}, {
"month": "May 2018",
"peekValue": "66",
"averageValue": "34.05",
"color": "#ff0000",
"color1": "#008000"
}, {
"month": "Jun 2018",
"peekValue": "74.5",
"averageValue": "34.45",
"color": "#ff0000",
"color1": "#008000"
}, {
"month": "Jul 2018",
"peekValue": "76",
"averageValue": "33.77",
"color": "#ff0000",
"color1": "#008000"
}, {
"month": "Aug 2018",
"peekValue": "71.33",
"averageValue": "34.60",
"color": "#ff0000",
"color1": "#008000"
}, {
"month": "Sep 2018",
"peekValue": "60.17",
"averageValue": "33.99",
"color": "#ff0000",
"color1": "#008000"
}
];
AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": chartData2,
"valueAxes": [{
"position": "left",
"unit": "%",
"title": "Memory Usage Trends"
}],
"graphs": [{
"id": "g1",
"fillAlphas": 0.9,
"valueField": "peekValue",
"lineAlpha": 0.8,
"type": "column",
"colorField": "color",
"balloonText": "<div style='margin:5px; font-size:12px;'>Peek Usage: <b>[[value]]%</b></div>"
},
{
"id": "g2",
"fillAlphas": 0.9,
"lineAlpha": 0.8,
"type": "column",
"valueField": "averageValue",
"balloonText": "<div style='margin:5px; font-size:12px;'>Average Usage: <b>[[value]]%</b></div>",
"colorField": "color1",
},
],
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"categoryField": "month",
"categoryAxis": {
},
"export": {
"enabled": true,
"menu": []
}
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
推荐阅读
- r - 使用 dbplyr 在 r 中具有条件的随机样本
- python - 删除熊猫中的重复标题(Python)
- python - python中分数计算器中的除法
- node.js - 如何解决 react-native-spotify-remote 的这个 NPM 依赖问题
- arrays - Unexpected output for this following code
- tensorflow - WSL2-$nvidia-smi 命令未运行
- python-3.x - 开发包时如何使用诗歌?
- java - 本地主机中的Mysql
- javascript - 如何从 javascript 中的方法引用中检索类?
- flutter - 在 Dart 中获取每个项目列表的平均值的最干净的方法是什么?