• Highcharts 动态制作3D柱状图


    学习参考菜鸟网站:http://www.runoob.com/highcharts/highcharts-tutorial.html

    我是通过后端返回设备数据,进行前端出图,效果如下:

    代码如下:

    django后台:

     1 def ft_index(request):
     2     if request.method == 'GET':
     3         """列表以字符串方式返回前端,返回结果如:[1,1,1,1]"""
     4         idc_info = []
     5         esxi_obj = models.EsxiTbl.objects.filter(IdcName=IDC_Info['FT'])
     6         idc_info.append(len(esxi_obj))
     7         vm_num = 0
     8         dt_num = 0
     9         net_num =0
    10         for e_obj in esxi_obj:
    11             vm_num = len(e_obj.vmachinetbl_set.all())
    12             vm_num += vm_num
    13             dt_num = len(e_obj.datastoretbl_set.all())
    14             dt_num += dt_num
    15             net_num = len(e_obj.networktbl_set.all())
    16             net_num += net_num
    17         idc_info.append(vm_num)
    18         idc_info.append(dt_num)
    19         idc_info.append(net_num)
    20         return render(request, 'ft_index.html', {'num': json.dumps(idc_info)})
    View Code

    前端代码如下:

    1 # 这里把后端的数据渲染到前端,然后在通过JS代码进行出图    
    2 <div id="init_data" style="display: none;">{{ num }}</div>
    3     <div id="data_graph" style=" auto; height: 700px; margin: 0 auto">
    4     </div>
    View Code

    前端JS代码如下:

    <script src="/static/plugin/nifty/js/jquery-2.1.1.min.js"></script>
    <script src="/static/js/highcharts.js"></script>
    <script src="/static/js/highcharts-3d.js"></script>
    # 以上3个js插件可以参考菜鸟网站下载
    <script>
            $(document).ready(function () {
                var chart = {
                    type: 'column',
                    margin: 175,
                    options3d: {
                        enabled: true,
                        alpha: 15,
                        beta: 15,
                        depth: 100
                    }
                };
                var title = {
                    text: '机房资源3D图',
                    style: {
                        fontSize: '30px;',
                        color: '#000000',
                    }
                };
                var subtitle = {
                    text: ''
                };
                var xAxis = {
                    {#                categories: Highcharts.getOptions().lang.shortMonths#}
                    categories: ['ESXI主机数', '虚拟机数', '存储数', '网络数'],
                    {#                title: {#}
                    {#                    text:'sfsdfasf',#}
                    {#                },#}
                    gridLineWidth: 0,
                    lineWidth: 0,
                };
                var yAxis = {
                    title: {
                        text: null
                    },
                    {#                gridLineWidth: 0,#}
                    {#                lineWidth: 0,#}
                };
                var series = [{
                    name: '资源数量总数',
                   # 下面这行就是从页面内获取具体的数据,将字符串转换为列表
                    data: JSON.parse($('#init_data').text())
                }];
    
                var json = {};
                json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                $('#data_graph').highcharts(json);
            });
        </script>    
    View Code
  • 相关阅读:
    Codeforces题目 java程序员
    5个能够有效帮助你快速创建超棒CSS3动画效果的类库 java程序员
    POJ3140:Contestants Division(DFS,树形DP) java程序员
    github的学习使用以及将自己开发的app传上去。
    考研还是就业
    五月道别
    写给一个陌生的朋友
    有办法忘了一个人吗?
    困惑啊,我倒底错在哪里?
    招聘广告文字撰写者时注意11项
  • 原文地址:https://www.cnblogs.com/zy6103/p/9139012.html
Copyright © 2020-2023  润新知