柱状图 线状图 填写数据

走视图地址  https://www.hcharts.cn/demo/highcharts

柱状图

 <script src="../static/jquery-3.2.1.min.js"></script>
    <script src="../static/chart/highcharts.js"></script>
  <div id="container" style="min-400px;height:400px"></div>







<div>  //循环数据
    {% for foo in code_sum %}
    <div class="nn hidden" data="{{ foo.num }}">{{ foo.nickname }}</div>
{% endfor %}

  <script>
    $(document).ready(function () {
        var data_list = new Array();
        var user;
        $('.nn').each(function () {
            if ($(this).hasClass('nn')) {
                var list = new Array();
                user = $(this).html();
                num = Number($(this).attr('data'));
                list.push(user);
                list.push(num);
            }
            data_list.push(list)
        });
var chart = Highcharts.chart('container', {

        chart: {
                type: 'column'
        },
        title: {
                text: '全公司程序代码排行榜'
        },
        subtitle: {
                text: '来源: <a href="">xx公司:作者春生</a>'
        },
        xAxis: {
                type: 'category',
                labels: {
                        rotation: -50  // 设置轴标签旋转角度
                }
        },
        yAxis: {
                min: 0,
                title: {
                        text: 'CodeCount'
                }
        },
        legend: {
                enabled: false
        },
        tooltip: {
                pointFormat: '代码行数: <b>{point.y:.1f} 行</b>'
        },
        series: [{
                name: '总人口',
                data: data_list,
                dataLabels: {
                        enabled: true,
                        rotation: -90,
                        color: '#FFFFFF',
                        align: 'right',
                        format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                        y: 10
                }
        }]
});
});
    </script>

线状图

  <script src="../static/jquery-3.2.1.min.js"></script>
    <script src="../static/chart/highcharts.js"></script>

   <div id="container" style="min-400px;height:400px"></div>




<div>
{% for foo in record_list %}
    <div class="my mm hidden " >{{ foo.ctime }}</div>
    <div class="my ll hidden" >{{ foo.line }}</div>
{% endfor %}

</div>

<script>
  $(document).ready(function () {
        var data_time = new Array();
        var data_line = new Array();
        var line;
        var time;
        $('.my').each(function () {
            if ($(this).hasClass('ll')) {
                line =Number($(this).html());
                data_line.push(line);
            }
            if ($(this).hasClass('mm')) {
                time = $(this).html();
                data_time.push(time);
            }

        }
        );
        console.log(data_line);
        console.log(data_time);
var chart = Highcharts.chart('container', {
        chart: {
                type: 'line'
        },
        title: {
                text: '<{{ user }}>代码详细信息。'
        },
        subtitle: {
                text: 'Data control author:春生'
        },
        xAxis: {
                categories: data_time
        },
        yAxis: {
                title: {
                        text: '代码 (行数)'
                }
        },
        plotOptions: {
                line: {
                        dataLabels: {
                                // 开启数据标签
                                enabled: true
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: false
                }
        },
        series: [{
                name: 'xxx公司',
                data: data_line
        }]
});
});
</script>

 遇到的坑：用继承模板  就要把script 继承  也就是说全部继承。