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

原创粉丝点击