Highcharts 动态制作3D柱状图

Posted 2020-11-10 十年如一..bj

学习参考菜鸟网站：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="width: 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