HighChart的动态添加元素问题
来源:互联网 发布:python中ord函数 编辑:程序博客网 时间:2024/06/05 10:35
需要引入的js文件
<script type="text/javascript" src="../js/hchart/jquery-1.8.3.min.js"></script><script type="text/javascript" src="../js/hchart/highcharts.js"></script><script type="text/javascript" src="../js/hchart/exporting.js"></script><script type="text/javascript" src="../js/hchart/highcharts-zh_CN.js"></script>
html:
<div id="container" style="width:1200px;height:380px;"></div>
js:
var chart; //定义全局chart//初始化表格chart = { chart: { type: 'column' }, title: { text: '' }, xAxis: { categories: [] }, yAxis: { allowDecimals: false, min: 0, title: { text: '负载百分比' } }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + '总和: ' + this.point.stackTotal; } }, plotOptions: { column: { stacking: 'normal' } }, series: [] }
数据填充:
//创建表格function createChart(empData){ //alert(chart.series) //填充x列 为员工姓名 for(var i in empData){ for (var j in empData[i]) { if(j==0 && i>0){ chart.xAxis.categories[i-1] = empData[i][j]; } } } //填充name for (var i in empData[0]) { if(i>0 && i<empData[0].length-1){ //下面这是最重要的 chart.series[i-1] = {'name':'','data':[]}; chart.series[i-1].name = empData[0][i]; } } //填充data for(var i in empData){ for (var j in empData[i]) { if(i>0 && j>0 && j<empData[i].length-1){ //注意要转换成浮点类型 chart.series[j-1].data[i-1] = parseFloat(empData[i][j]); } } } showChart();}
显示:
function showChart(){ $('#container').highcharts(chart);}
highchart原型图:https://www.hcharts.cn/demo/highcharts/column-stacked-and-grouped
阅读全文
0 0
- HighChart的动态添加元素问题
- highchart 动态添加数据
- highchart 动态图的展示
- 动态添加表单元素需要注意的一个问题
- highchart动态添加点,并改变点的颜色为红色
- jquery动态添加元素,事件失效问题
- HighChart 动态加载数据 不成功的解决办法
- 解决highchart滚动条的问题
- 技巧 Html元素的动态添加方法
- JavaScript动态的为元素添加事件
- JAVASCRIPT动态的为元素添加事件
- JavaScript动态的为元素添加事件
- JQuery动态添加Select的Option元素
- jquery 动态生成的元素 添加事件
- JQuery动态添加Select的Option元素
- jQuery动态添加的元素绑定事件
- jquery 动态添加元素的事件
- 给动态增加的元素添加事件
- ajax调用mvc action使用实体参数
- Web Uploader插件
- 《c语言程序设计》例 3-1 3-2 3-3 3-5 3-6 3-7 3-8 3-9 3-10 3-11
- BIM软件工具选择顺手——事半功倍
- jquery 滚动列表
- HighChart的动态添加元素问题
- Untiy使用NetworkDiscorver创建 局域网 房间
- 好久没有写博客了,写一下刚学的
- eclipse+android+jsbridge 上传图片到网页
- Connections could not be acquired from the underlying database! Tomcat服务器启动速度异常
- opencv-霍夫圆变换
- Spring Cloud 资料参考
- 有关机器学习每个人都应该了解的东西
- 爬虫入门+数据总览