thinkphp3.2实现折线图

浏览:999 发布日期:2018/03/06 分类:用法示例
用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 下载:9 次 )

评论( 相关
后面还有条评论,点击查看>>