highcharts插件
阿新 • • 發佈：2019-04-16
dem 20px inf code method post label 旋轉 lin
詳見官網：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"> <scriptsrc="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;"> <formaction="" 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插件