Amcharts, устанавливающие столбцы столбцов для определенного цвета, не работает - PullRequest
Новая
       7

Amcharts, устанавливающие столбцы столбцов для определенного цвета, не работает

0 голосов
/ 19 сентября 2018

Я использую amcharts.Мне нужно установить цвет столбца / бара на определенный цвет.

Я пробовал много попыток, таких как:

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

Но у меня ничего не работает.

Мой JSFiddle

Не уверен, чего мне не хватает.Любое предложение будет высоко оценено!

1 Ответ

0 голосов
/ 19 сентября 2018

Вы можете добавить атрибут color к каждому элементу 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>
...