amcharts实现汽车流量分布图效果
代码语言:html
所属分类:图表
代码描述:amcharts实现汽车流量分布图效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <style> #chartdiv { width : 100%; height : 500px; } .amcharts-graph-car .amcharts-graph-fill { filL: url(#carFill); } </style> </head> <body translate="no"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-light.js"></script> <div id="chartdiv"></div> <script> var chart = AmCharts.makeChart("chartdiv", { "addClassNames": "true", "defs": { "radialGradient": [ { "id": "carFill", "stop": [ { "offset": "0%", "stop-color": "red" }, { "offset": "100%", "stop-color": "blue" }] }] }, "type": "serial", "theme": "light", "titles": [{ "text": "Traffic incidents per year", "size": 15 }], "legend": { "align": "center", "equalWidths": false, "periodValueText": "total: [[value.sum]]", "valueAlign": "left", "valueText": "[[value]] ([[percents]]%)", "valueWidth": 100 }, "dataProvider": [{ "year": "2000", "cars": 1587, "motorcycles": 650, "bicycles": 121 }, { "year": "1995", "cars": 1567, "motorcycles": 683, "bicycles": 146 }, { "year": "1996", "cars": 1617, "motorcycles": 691, "bicycles": 138 }, { "year": "1997", "cars": 1630, "motorcycles": 642, "bicycles": 127 }, { "year": "1998", "cars": 1660, "motorcycles": 699, "bicycles": 105 }, { "year": "1999", "cars": 1683, "motorcycles": 721, "bicycles": 109 }, { "year": "2000", "cars": 1691, "motorcycles": 737, "bicycles": 112 }, { "year": "2001", "cars": 1298, "motorcycles": 680, "bicycles": 101 }, { "year": "2002", "cars": 1275, "motorcycles": 664, "bicycles": 97 }, { "year": "2003", "cars": 1246, "motorcycles": 648, "bicycles": 93 }, { "year": "2004", "cars": 1218, "motorcycles": 637, "bicycles": 101 }, { "year": "2005", "cars": 1213, "motorcycles": 6.........完整代码请登录后点击上方下载按钮下载查看
网友评论0