highchart柱状堆叠图动态数据请求
2017-03-16 20:58
295 查看
$(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)
}
});
});
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)
}
});
});
相关文章推荐
- ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图
- highchart动态获取json数据,更新图标显示
- 使用AngularJS结合Highchart图表动态获取JSON格式数据
- HighChart 动态加载数据 不成功的解决办法
- 集群监控之web端动态的显示数据(highchart)
- HighChart扩展-动态获取数据
- HighChart 折线图 动态加载数据
- HighChart 3D饼状图 动态加载数据
- highchart 动态添加数据
- highChart数据动态更新
- FusionChart实现柱状图、饼状图的动态数据显示 附Demo
- DevExpress 图表控件:ChartControl 动态绑定数据
- DevExpress 图表控件:ChartControl 动态绑定数据
- HighChart学习-更新数据data Series与重绘
- HighChart学习-更新数据data Series与重绘
- [置顶] AChartEngine应用之PieChart(动态饼图,允许产生动态数据并显示)
- 实现FusionChart动态获取数据(四)
- flex4 动态获取对象属性,动态生成数据源,动态生成lineChart,清除数据。
- 用C#构造HighChart类库,把数据转换成JSON---第一阶段失败告终
- extjs.4.1,4.2,结合 jquery 遮罩层,ajax 请求时 数据遮罩,动态加载 contral