AmCharts ajuste de las barras de columna para un color específico no está funcionando

votos
1

Estoy usando amCharts. Necesito configurar el color de la columna / bar para un color específico.

Probé con muchos intentos como:

  • ColorField : color
  • FillColorField : color

Pero nada está trabajando para mí.

mi jsFiddle

No estoy seguro, lo que me falta. Cualquier sugerencia sería muy apreciada!

Publicado el 19/09/2018 a las 17:15
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Se puede añadir un color de atributo para cada chartData2 elemento. Ahora, en las opciones de gráficos puede agregar:

colorField": "color"

Eso significa tomar el atributo de color de chartData2 mientras dibuja cada barra.

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>

Respondida el 19/09/2018 a las 17:38
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more