下图是实现的效果图
下面的代码的折线图的重点；需要引用两个重要的js文件 是highcharts.js与exporting.js。
<!-- 折线图 -->
<script src="__COMMON__/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="__COMMON__/js/highcharts.js"></script>
<script type="text/javascript" src="__COMMON__/js/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'chart_line', // 图表放置的容器，DIV
defaultSeriesType: 'line', // 图表类型line(折线图),
zoomType: 'x' // x轴方向可以缩放
},
credits: {
enabled: false // 右下角不显示LOGO
},
title: {
text: '用户登录每月统计表' // 图表标题
},
subtitle: {
text: '2017年' // 副标题
},
xAxis:{ // x轴
categories: [ <?php echo rtrim($weeks_titme, ","); ?> ] , // x轴标签名称
gridLineWidth: 1, // 设置网格宽度为1
lineWidth: 2, // 基线宽度
labels:{y:26} // x轴标签位置：距X轴下方26像素
},
yAxis:{ // y轴
title: {text: '单位：次'}, // 标题
lineWidth: 2 // 基线宽度
},
plotOptions:{ // 设置数据点
line:{
dataLabels:{
enabled:true // 在数据点上显示对应的数据值
},
enableMouseTracking: false // 取消鼠标滑向触发提示框
}
},
legend: { // 图例
layout: 'vertical', // 图例显示的样式：水平（horizontal）/垂直（vertical）
backgroundColor: '#ffc', // 图例背景色
align: 'left', // 图例水平对齐方式
verticalAlign: 'top', // 图例垂直对齐方式
x: 100, // 相对X位移
y: 70, // 相对Y位移
floating: true, // 设置可浮动
shadow: true // 设置阴影
},
exporting: {
enabled: false // 设置导出按钮不可用
},
series: [] // 数据列
};
var items = <?php echo json_encode($echo_weeks); ?> ;
$.each(items, function(itemNo, item) {
var series = {
data: []
};
series.name = item.name;
var dats = item.data.split(",");
for (var i = 0; i < dats.length; i++)
series.data.push(parseInt(dats[i]));
options.series.push(series);
});
var chart = new Highcharts.Chart(options);
});
</script> html页面 其实就是一句话代码
<!-- 每月折线图 -->
<div id="chart_line" style="min-width:500px;height:350px;margin-bottom:20px;"></div> 详细的请下载折线图.rar压缩包吧，还有不懂的可以在下面留言，看到会第一时间给出回复。
最后一句： 技术无价，不喜勿喷。
折线图-V2.zip
( 94.73 KB 下载：67 次 )
