How to set custom colors in amCharts Column Chart

来源:互联网 发布:仁爱版初中英语软件 编辑:程序博客网 时间:2024/05/11 05:34



html

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>

<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>

<div id="chartdiv"></div>

css

#chartdiv {
width : 100%;
height : 500px;
font-size : 11px;
}



JavaScript

var chart = AmCharts.makeChart("chartdiv", {
    "theme": "none",
    "type": "serial",
     "columnWidth":0.01,
    "dataProvider": [{
        "country": "USA",
        "year2004": -3.5,
        "year2005": 4.2,
        "color":"#009933"
    }, {
        "country": "UK",
        "year2004": -1.7,
        "year2005": 3.1,
        "color":"#009933"
    }, {
        "country": "Canada",
        "year2004": 2.8,
        "year2005": -2.9,
        "color":"#009933"
    }, {
        "country": "Japan",
        "year2004": 2.6,
        "year2005": -2.3,
        "color":"#009933"
    }, {
        "country": "France",
        "year2004": -1.4,
        "year2005": 2.1,
        "color":"#009933"
    }, {
        "country": "Brazil",
        "year2004": 2.6,
        "year2005": -1,
        "color":"#009933"
    }],
    "valueAxes": [{
        "unit": "%",
        "position": "left",
        "title": "GDP growth rate",
    }],
    "startDuration": 1,
    "graphs": [{
        "balloonText": "GDP grow in [[category]] (2004): <b>[[value]]</b>",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2004",
        "type": "column",
        "colorField":"color",
        "valueField": "year2004"
    }, {
        "balloonText": "GDP grow in [[category]] (2005): <b>[[value]]</b>",
        "fillAlphas": 0.9,
        "lineAlpha": 0.2,
        "title": "2005",
        "type": "column",
        "clustered":false,
        
        "columnWidth":0.01,
        "valueField": "year2005"
    }],
    "plotAreaFillAlphas": 0.1,
    "categoryField": "country",
    "categoryAxis": {
        "gridPosition": "start"
    }
});

0 0
原创粉丝点击