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