将栏设置为特定颜色的Amcharts无法正常工作

Question

我正在使用amcharts。我需要将列/栏的颜色设置为特定的颜色。

我尝试了很多尝试，例如：

• "ColorField" : "color"
• "FillColorField" : "color"

但是没有任何东西对我有用。

我的JSFiddle

不确定，我缺少什么。任何建议将不胜感激！

Answer 1

您可以为每个 chartData2 元素添加颜色属性。现在，您可以在图形选项中添加：

colorField": "color"

这意味着在绘制每个条形时从chartData2获取color属性。

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>