网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。
highcharts数据图表代码示例 ，有过车实时数据、近七日过车数据、近6个月过车数据、卡口过车量、近一年烟台人口统计、近一年烟台人口波动、人口统计(性别)、人口统计(年龄)、人口统计(国籍)、人口统计(国籍)、人口统计(文化程度)、人口统计(职业类别)、近一年人员统计、近一年人员波动统计等。
核心代码
html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/BigDataShow.css" />
</head>
<body style="background-color: #313131;;text-align: center">
<div id="datashow-main" class="datashow-main">
<div id="datashow-title">
烟台市公安局综合大数据平台
</div>
<div id="datashow-top-nav">
<table border="0" align="center">
<tr>
<td><div id="datashow-nav-car" class="datashow-top-nav">
过车总量<br>
123899000001
</div></td>
<td style="width: 50%" rowspan="2">
<div class="wrap" style="width: 450px;">
<div class="items" id="Item0">
<div class="itemCon">
<div id="Map" ></div>
</div>
</div>
</div>
</td>
<td><div id="datashow-nav-people" class="datashow-top-nav">
人员总量<br>
11万
</div></td>
</tr>
<tr>
<td><div id="datashow-nav-ytpeople" class="datashow-top-nav">
全烟常驻人口库<br>
350万
</div></td>
<td><div id="datashow-nav-operation" class="datashow-top-nav">
运维总设备<br>
9000
</div></td>
</tr>
</table>
</div>
<div class="datashow-charts" >
<div class="datashow-chart" id="chart-nowcar"></div>
<div class="datashow-chart" id="chart-7daycar"></div>
<div class="datashow-chart" id="chart-6monthcar"></div>
<div class="datashow-chart" id="chart-maxcar"></div>
</div>
<div class="datashow-charts">
<div class="datashow-chart" id="chart-yearpeople"></div>
<div class="datashow-chart" id="chart-peoplechange"></div>
<div class="datashow-chart" id="chart-sexpeople"></div>
<div class="datashow-chart" id="chart-agepeople"></div>
</div>
<div class="datashow-charts">
<div class="datashow-chart" id="chart-countrypeople"></div>
<div class="datashow-chart" id="chart-citypeople"></div>
<div class="datashow-chart" id="chart-culturepeople"></div>
<div class="datashow-chart" id="chart-jobpeople"></div>
</div>
<div class="datashow-charts">
<div class="datashow-chart" id="chart-yearperson"></div>
<div class="datashow-chart" id="chart-changeperson"></div>
<div class="datashow-chart" id="chart-sexperson"></div>
<div class="datashow-chart" id="chart-ageperson"></div>
</div>
<div class="datashow-charts">
<div class="datashow-chart" id="chart-dirverperson"></div>
<div class="datashow-chart" id="chart-foreignperson"></div>
<div class="datashow-chart" id="chart-prisonperson"></div>
<div class="datashow-chart" id="chart-eventperson"></div>
</div>
</div>
</body>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/chart-nowcar.js"></script>
<script src="js/chart-7daycar.js"></script>
<script src="js/chart-6monthcar.js"></script>
<script src="js/chart-maxcar.js"></script>
<script src="js/chart-yearpeople.js"></script>
<script src="js/chart-peoplechange.js"></script>
<script src="js/chart-sexpeople.js"></script>
<script src="js/chart-sexperson.js"></script>
<script src="js/chart-dirverperson.js"></script>
<script src="js/chart-agepeople.js"></script>
<script src="js/chart-ageperson.js"></script>
<script src="js/chart-countrypeople.js"></script>
<script src="js/chart-citypeople.js"></script>
<script src="js/chart-culturepeople.js"></script>
<script src="js/chart-jobpeople.js"></script>
<script src="js/chart-yearperson.js"></script>
<script src="js/chart-changeperson.js"></script>
<script src="js/chart-prisonperson.js"></script>
<script src="js/chart-foreignperson.js"></script>
<script src="js/chart-eventperson.js"></script>
<script type="text/javascript" src="js/lib/raphael-min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="data/c3706.js"></script>
<script type="text/javascript">
$(function(){
// 默认
$('#Map').SVGMap({
mapName: 'c3706',
mapWidth: 400,
mapHeight: 300,
showName: true
});
});
</script>
</html>
json格式如下：
[{
"name": "烟台市",
"data": [30000, 60009, 90005, 140005, 180002, 210005,311111]
}
] 转载请注明来源：highcharts综合大数据图表页面代码
本文永久链接地址：https://www.moyouyouw.cn/code/560.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论