javascript - Amcharts 将柱形条设置为特定颜色不起作用

Question

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

我试过很多次，比如:

• “颜色字段”:“颜色”
• "FillColorField": "color"

但对我来说没有任何效果。

我的 JSFiddle

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

Answer 1

您可以为每个 chartData2 元素添加一个 color 属性。现在，您可以在图表选项中添加:

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>