码迷,mamicode.com
首页 > 其他好文 > 详细

柱状图 线状图 填写数据

时间:2018-06-19 16:10:42      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:失效   number   ext   enabled   公司   XA   array   dem   div   

 

 

走视图地址  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-width:400px;height:400px"></div>







<div>  //循环数据
    {% for foo in code_sum %}
    <div class="nn hidden" data="{{ foo.num }}">{{ foo.nickname }}</div>
{% endfor %}
html
技术分享图片
  <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

 

现状图

技术分享图片
  <script src="../static/jquery-3.2.1.min.js"></script>
    <script src="../static/chart/highcharts.js"></script>

   <div id="container" style="min-width: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>
html
技术分享图片
<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

 

 

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

 

柱状图 线状图 填写数据

标签:失效   number   ext   enabled   公司   XA   array   dem   div   

原文地址:https://www.cnblogs.com/jiangchunsheng/p/9198543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!