1、前端
Highcharts數據展示網址 https://www.highcharts.com.cn/
<include file="public@header" />
<meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* css 代碼 */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/series-label.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<div class="wrap js-check-wrap">
<ul class="nav nav-tabs">
<li><a href="{:url('Customer/index')}">客戶列表</a></li>
<li class="active"><a href="{:url('Figure/index')}">圖形數據</a></li>
</ul>
</div>
<body>
<div id="container" style="max-width:800px;height:400px"></div>
<script>
//console.log(JSON.stringify({$date}));
var arr = '{$date}'.split(',');
var date = [];
for(var i in arr){
//alert(arr[i])
date[i] = arr[i];
}
console.log(date);
var chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '{$user.name}'
},
subtitle: {
text: ''
},
xAxis: {
categories: date
},
yAxis: {
title: {
text: '體重'
}
},
plotOptions: {
line: {
dataLabels: {
// 開啓數據標籤
enabled: true
},
// 關閉鼠標跟蹤，對應的提示框、點擊事件會失效
enableMouseTracking: false
}
},
series: [{
name: '體重',
data: [{$sum}]
},
]
});
</script>
</body>
</html>
