Highcharts 动态制作3D柱状图

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

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

代码如下：

django后台：

 def ft_index(request):

     if request.method == 'GET':

         """列表以字符串方式返回前端，返回结果如：[1,1,1,1]"""

         idc_info = []

         esxi_obj = models.EsxiTbl.objects.filter(IdcName=IDC_Info['FT'])

         idc_info.append(len(esxi_obj))

         vm_num = 0

         dt_num = 0

         net_num =0

         for e_obj in esxi_obj:

             vm_num = len(e_obj.vmachinetbl_set.all())

             vm_num += vm_num

             dt_num = len(e_obj.datastoretbl_set.all())

             dt_num += dt_num

             net_num = len(e_obj.networktbl_set.all())

             net_num += net_num

         idc_info.append(vm_num)

         idc_info.append(dt_num)

         idc_info.append(net_num)

         return render(request, 'ft_index.html', {'num': json.dumps(idc_info)})

前端代码如下：

 # 这里把后端的数据渲染到前端，然后在通过JS代码进行出图

 <div id="init_data" style="display: none;">{{ num }}</div>

     <div id="data_graph" style="width: auto; height: 700px; margin: 0 auto">

     </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>