您的位置:首页 > 其它

How to set custom colors in amCharts Column Chart

2015-12-21 10:18 260 查看
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"

    }

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: