zoukankan      html  css  js  c++  java
  • Highcharts图表应用

    <!DOCTYPE html>
    <html>
    <head>
        <title>11.12迟到统计</title>
    </head>
    <body>
        <!-- 图表容器 DOM -->
        <div id="container" style=" 600px;height:400px;"></div>
        <!-- 引入 highcharts.js -->
        <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script>
            //配置
            var options = {
                title:{
                    text:'11.12迟到统计'
                },
                xAxis: {
                    categories: ['1号', '2号', '3号','4号','5号','6号','7号']   // x 轴分类
                },
                yAxis: {
                    title: {
                        text: '迟到人数'                // y 轴标题
                    }
                },
                series: [{                              // 数据列
                    name: '小明',                        // 数据列名
                    data: [1, 0, 4 ,5 ,3,2,1]                     // 数据
                }, {
                    name: '小红',
                    data: [5, 7, 3,3,2,2,1]
                }]
            };
            //实例化
            var chart = Highcharts.chart('container', options);
        </script>
    </body>
    </html>

    效果:

    通往牛逼的路上,在意的只有远方!
  • 相关阅读:
    maven错误
    angularjs的一点总结
    工具汇总
    重启outlook的bat脚本
    前端框架参考
    imply套件以及plyql的安装
    centos下nodejs,npm的安装和nodejs的升级
    kafka错误集锦
    动态规划DP笔记
    链接
  • 原文地址:https://www.cnblogs.com/jiangshiguo/p/9947148.html
Copyright © 2011-2022 走看看