您现在的位置:首页 >> 前端 >> 内容

完美动态数据图形表格

时间:2017/8/28 9:23:00 点击:

  核心提示:完美动态数据图形表格。highchartsmeta charset=UTF-8 /title/titlescript src=https://apps.bdimg.com/libs/jquery/2....

完美动态数据图形表格。

highcharts

<meta charset="UTF-8" />
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script>
<p id="container">&nbsp;</p>
<p id="container1">&nbsp;</p>
<script language="JavaScript">
                $(document).ready(function() {
                    var title = {
                        text: '分数成绩表'
                    };
                    var subtitle = {
                        text: '小风儿'
                    };
                    var xAxis = {
                        categories: ['期中', '期末', '期中', '期末','期中', '期末']
                    };
                    var yAxis = {
                        title: {
                            text: '分数'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    };

                    var tooltip = {
                        valueSuffix: '分'
                    }

                    var legend = {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    };

                    var series = [{
                        name: '语文',
                        data: [114, 105, 110, 85, 108, 68,]
                    }, {
                        name: '数学',
                        data: [140, 99, 98, 75, 99, 60,]
                    }, {
                        name: '英语',
                        data: [147, 123, 140, 110, 125, 110,]
                    }, {
                        name: '化学',
                        data: [102, 105, 140, 132, 89, 105,]
                    }];

                    console.log(series);

                    var json = {};

                    json.title = title;
                    json.subtitle = subtitle;
                    json.xAxis = xAxis;
                    json.yAxis = yAxis;
                    json.tooltip = tooltip;
                    json.legend = legend;
                    json.series = series;

                    $('#container').highcharts(json);
                });
            </script>

 

作者:网络 来源:littlewind