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,
&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0