學習參考菜鳥網站：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)})

前端代碼如下：

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>

前端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>    

Highcharts 動態制作3D柱狀圖