用thinkphp3.2中使用highcharts.js实现折线图,重要代码如下;
下图是实现的效果图


下面的代码的折线图的重点;需要引用两个重要的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 次 )

评论() 相关

收藏

赞

Smile_菜菜

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。