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