javascript - Am 在条形图中绘制不同颜色的图表不起作用

Question

我有一个 amcharts 条形图，如下所示:引用我的 fiddle

FIDDLE

请检查我的数据我提供了不同的颜色但没有得到

var chartData = [
    [
        { "country": "Czech Republic", "litres": 156.90,"color":"#448800"},
        { "country": "Ireland", "litres": 131.10,"color":"#880000"},
        { "country": "Germany", "litres": 115.80,"color":"#ff9900"}
    ]
]

我需要的是每个栏中的不同颜色。如何放置不同的颜色？

Answer 1

我的工作示例

var chart;

    var chartData = [{
        country: "USA",
        visits: 4025,
        subdata: [
            { country: "New York", visits: 1000  },
            { country: "California", visits: 785    },
            { country: "Florida", visits: 501    },
            { country: "Illinois", visits: 321   },
            { country: "Washington", visits: 101  }
        ] ,"color":"#EEAA00"},
    {
        country: "China",
        visits: 1882
    ,"color":"#DDBB00"},
    {
        country: "Japan",
        visits: 1809
    ,"color":"#CCDD00"},
    {
        country: "Germany",
        visits: 1322
    ,"color":"#FFEE00"}];


    AmCharts.ready(function() {
        // SERIAL CHART
        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        chart.categoryField = "country";
        chart.startDuration = 1;

        // AXES
        // category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.labelRotation = 90;
        categoryAxis.gridPosition = "start";

        // value
        // in case you don't want to change default settings of value axis,
        // you don't need to create it, as one value axis is created automatically.
        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.valueField = "visits";
        graph.colorField = "color"
        graph.balloonText = "[[category]]: [[value]]";
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 0.8;
        chart.addGraph(graph);

        chart.addListener("clickGraphItem", function (event) {
            // let's look if the clicked graph item had any subdata to drill-down into
            if (event.item.dataContext.subdata != undefined) {
                // wow it has!
                // let's set that as chart's dataProvider
                event.chart.dataProvider = event.item.dataContext.subdata;
                event.chart.validateData();
            }
        });

        chart.write("chartdiv");
    });

在你的例子中 变量图；

    var chartData = [
        [
            { "country": "Czech Republic", "litres": 156.90,"color":"#448800"},
            { "country": "Ireland", "litres": 131.10,"color":"#880000"},
            { "country": "Germany", "litres": 115.80,"color":"#ff9900"}
        ]
    ]
    //AmCharts.ready(function() {
        // RADAR CHART
        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData[0];
        chart.categoryField = "country";
        chart.startDuration = 3;
        chart.sequencedAnimation = false;

        // VALUE AXIS
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.axisAlpha = 0.15;
        valueAxis.minimum = 0;
        valueAxis.dashLength = 3;
        chart.addValueAxis(valueAxis);

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.type = "column";
       graph.colorField = "color"
        graph.valueField = "litres";
        graph.fillAlphas = 0.6;
        graph.balloonText = "[[value]] litres of beer per year";
        chart.addGraph(graph);

        // WRITE
        chart.write("chartdiv");

添加 graph.colorField = "color"它正在你的 fiddle 中工作