highchart柱状堆叠图动态数据请求
$(function () { var options = { chart: { renderTo: 'indoor', type: 'column', }, title: { text: '室内问题' }, xAxis: { categories: ['MR弱覆盖楼宇', '高2无4', '2G高倒挂', '投诉', '保障需求', '市场需求'], labels: { rotation:0 } }, yAxis: { max: 1000, min: 0, title: { text: '' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'right', x: -30, verticalAlign: 'top', y: 25, floating: true, backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', borderWidth: 1, shadow: false }, tooltip: { formatter: function () { return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal; } }, plotOptions: { column: { pointWidth:'30', stacking: 'normal', dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', style: { textShadow: '0 0 3px black' } } } }, series: [{ name: '已提方案', data: [], color: '#FFA500' }, { name: '待提方案', data: [], color: '#228B22' }] }; var newWithoutDemand =[]; var newWithDemand =[]; $.ajax({ url: '/Public/StatIssueByBranch?BranchID=1&CellularTypeID=2', type: 'GET', dataType: 'json', success: function (data) { for(var i=0;i<data.length;i++){ newWithoutDemand.push(data[i].WithoutDemand); newWithDemand.push(data[i].WithDemand); } console.log('###') var obj = newWithDemand; var obj1 = newWithoutDemand; options.series[0].data = obj; options.series[1].data = obj1; console.log(obj) console.log(obj1) chart = new Highcharts.Chart(options); //这里顶部chart }, error: function () { console.log(error) } }); });
下面是我的公众号,大家可以关注一下,可以一起学习,一起进步: