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"
}
});
<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"
}
});
相关文章推荐
- 部署时System.Security.Cryptography.CryptographicException.ThrowCryptographicException(Int32 hr)
- 模板内部不支持原生js的方法?》》artTemplate模版方法注册window全部事件方法
- (转)解决WINDOWS 程序界面闪烁问题的一些经验
- 历时八年 HTML5标准终于制定完成
- 浅析HTML5的10大优势
- 模板内部不支持原生js的方法?》》artTemplate模版方法注册window全部事件方法
- 模式识别之bayes---bayes 实现实例
- php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
- zigbee z-stack 地址类型
- 分享40个Java多线程问题小结
- MBR 之 硬盘基本知识(磁道、扇区、柱面、磁头数、簇、MBR、DBR)
- leveldb源码分析 之 入门使用
- redhat ftp服务器设置
- C++编程实践: 抽象基类
- linux下svn的用法
- 利用递归级联删除的代码
- OpenGL 无法打开文件“freeglut_static.lib
- 玩转RobotFramework下的Web自动化测试(二)——关于上篇文章的一些思考
- python3 抓取必应bing首页图片作为桌面背景
- pig脚本记录,对于pig脚本跑批处理