详见官网：https://www.highcharts.com.cn/demo/highcharts

详细使用代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script src="/static/Highcharts-6.1.2/code/highcharts.js"></script>

    <script src="/static/js/record_score.js"></script>

</head>

<body>

<div class="alert alert-info alert-dismissible" role="alert" style="text-align: center" style="font-size: 26px;">

    <strong>{{ student_obj }}的信息</strong>

</div>

{% csrf_token %}

<div class="container">

    <div class="row">

        <div class="col-md-8 col-md-offset-2" style="margin-top: 20px;">

            <form action="" method="post">

            {%csrf_token%}

                <table class="table-hover table  table-striped">

                    <thead>

                    <tr class="warning">

                        <th>序号</th>

                        <th>班级名称</th>

                        <th>班主任</th>

                        <th>讲师</th>

                        <th>查看成绩</th>

                    </tr>

                    </thead>

                    <tbody>

                    {% for cls in class_list %}

                        <tr class="success">

                            <td>{{ forloop.counter }}</td>

                            <td>{{ cls }}</td>

                            <td>{{ cls.tutor }}</td>

                            <td>

                                {% for t in cls.teachers.all %}

                                {{t}}

                                {% endfor %}

                            </td>

                            <td><a sid="{{student_obj.pk}}" cid="{{cls.pk}}" href="javascript:void(0)" class="score_chart" >查看柱状图</a>

                            </td>

                        </tr>

                    {% endfor %}

                    </tbody>

                </table>

            </form>

        </div>

    </div>

</div>

<div id="score_chart" style="width:600px;height:400px;margin-left: 300px;"></div>

<script>

    $(".score_chart").click(function () {

               var cid=$(this).attr("cid");

               $.ajax({

                   url:"",

                   type:"get",

                   data:{

                       cid:cid

                   },

                   success:function (data) {

                           var chart = Highcharts.chart('score_chart', {

                    chart: {

                        type: 'column'

                    },

                    title: {

                        text: '个人成绩柱状图'

                    },

                    subtitle: {

                        text: '数据截止 2018-09，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'

                    },

                    xAxis: {

                        type: 'category',

                        labels: {

                            rotation: -45 // 设置轴标签旋转角度

                        }

                    },

                    yAxis: {

                        min: 0,

                        title: {

                            text: '分数'

                        }

                    },

                    legend: {

                        enabled: false

                    },

                    tooltip: {

                        pointFormat: '当天分数: <b>{point.y:.2f} 分</b>'

                    },

                    series: [{

                        name: '总人口',

                        data: data,

                        dataLabels: {

                            enabled: true,

                            rotation: -90,

                            color: '#FFFFFF',

                            align: 'right',

                            format: '{point.y:.2f}', // :.1f 为保留 1 位小数

                            y: 10

                        }

                    }]

                });

                   }

               });

    })

</script>

</body>

</html>

highcharts插件的更多相关文章

  1. 数据统计表插件，highcharts插件的简单应用

    highcharts插件的简单应用,非常全能好用的一个数据统计表插件. $(function () { $('#container').highcharts({ chart:{ type:" ...

  2. 图表插件——Highcharts插件的使用（一柱状图）

    1.下载Highcharts插件 官方下载网址:http://www.highcharts.com/download 2.引入需要的js文件 <script src="~/Script ...

  3. 利用Highcharts插件制作动态图表

    向大家推荐一款js插件,用于绘制图表Highcharts,具体操作可参考官方网站:http://www.hcharts.cn/ 1.如下为本人制作的图形效果如下,当然其效果远不止这些,大家还可以深入研 ...

  4. highcharts插件使用总结和开发中遇到的问题及解决办法

    这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8, 当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快. 在jsp中使用hig ...

  5. jquery结合Highcharts插件实现动态数据仪表盘图形化显示效果

    仪表盘显示效果如图: 方法一效果图: 方法二效果图(插件版本4.0.1): ​ js代码如下: $(function(){ //方法一: var chart = new Highcharts.Char ...

  6. highcharts 插件问题

    Uncaught TypeError: $(...).highcharts is not a function 解决方法: $('#container').highcharts({ colors: [ ...

  7. jquery结合highcharts插件显示实时数据动态曲线图

    效果如图所示: js代码如下: $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false }, co ...

  8. HighCharts插件学习（二）

    HighCharts属性 credits: {版权信息} data: {数据功能模块} drilldown: {钻取} exporting: {导出}   labels: {标签}   legend: ...

  9. C#趋势图(highcharts插件)

    <!--图表效果展现--> <div class="TUI-layout-center" style="overflow: auto;" id ...

随机推荐

  1. 20170719 Mysql 配置远端Mysql访问，增加表/存储过程

    -- 1 .在windows 环境中安装Mysql 会按照到默认的C盘当中,如何修改呢--? -- 2. 如何只安装客户端不安装Mysql 数据库服务  --? -- 3. 表的特殊列,默认采用函数值 ...

  2. Java 基础 常用API (System类，Math类，Arrays， BigInteger，)

    基本类型包装类 基本类型包装类概述 在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们需要把字符串数据,根据需求转换成指定的基本数据类型,如年龄需要转换成int类 ...

  3. linux 执行远程linux上的shell脚本或者命令以及scp 上传文件到ftp--免密码登陆

    场景:在linux A 上执行Linux B上的shell脚本和命令 步骤1.设置ssh免登陆 1.SSH无密码登录 # 本地服务器执行(A机器):生成密钥对 ssh-keygen -t dsa -P ...

  4. win10系统180天试用到期需要激活

    激活时激活不了,需要先修复下:4-Win10yjjh_XiTongZhiJia 链接: https://pan.baidu.com/s/1M_aNu2bqtEVn3l8FXsa91A 提取码: 784 ...

  5. [Guitar self-learning] 基本乐理知识1. 度，升降记号#/b

    度:是音程上面的单位, 指每两个音程(音名)之前的音距.(就像我们说身高时的cm一样, 用来表明当时的音高.) 升记号:#   , 表明在当前的音高下, 升半个音高. 如 #3  ==  4 降记号: ...

  6. js动态规划---背包问题

    //每种物品仅有一件,可以选择放或不放 //即f[i][w]表示前i件物品恰放入一个容量为w的背包可以获得的最大价值. //则其状态转移方程便是:f[i][w]=max{f[i-1][w],f[i-1 ...

  7. TensorFlow读取CSV数据（批量）

    直接上代码: # -*- coding:utf-8 -*- import tensorflow as tf def read_data(file_queue): reader = tf.TextLin ...

  8. css3--之HSL颜色

    jQuery之家: CSS3中使用的HSL颜色指南:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503281590.html 要理解HSL ...

  9. python mysql program

    //test.py #!/usr/bin/python # -*- coding: UTF-8 -*- import MySQLdb # 打开数据库连接 db = MySQLdb.connect(&q ...

  10. windows go dll 框架

    乘着还没有添加商业功能之前,先给大家把福利分享了 希望有需要的朋友能够用的上 这个框架是在用windows平台,GO做的http/https服务,调用dll现有的库接口实现特定功能的大框架 //dll ...