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