<div id="container" style="min-width:700px;height:400px"></div>
#javascript#
$("#container").highcharts({
chart: {
type: 'column'
},
credits: {//去掉 highcharts.com
enabled:false
},
colors: ['#7cb5ec','#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
title: {
text: '平台品牌数据',
style:{
color:'#8085e8'
}
},
subtitle: {
text: '电子商务公司'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (个)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} 个</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: []
});
// 动态获取数据并设置
$.ajax({
type: 'get',
url: '<?php echo site_url()?>/analysesdata/Brandarea/test',
data: '',
dataType: 'json',
success: function (data) {
var brand = new Array();
brand = ("招商,善融,建行,工商,民生,淘宝,邮乐,一卡通").split(',');
console.info(brand);
//设置统计数据
var brand_chart = $("#container").highcharts();
//设置x轴数据
brand_chart.xAxis[0].setCategories(['苹果', '三星', '小米', '华为', '魅族']);
//设置柱状图数据
var i=0;
$.each(brand,function (key, val) {
//设置 X 数据
brand_chart.addSeries({name:val,data:eval("([" + data[val] + "])")});
//alert(brand_chart.series[i].name);
//brand_chart.series[i].setData(eval("([" + data[val] + "])"));
i++;
});
// brand_chart.series[i].setData(eval("([" + data['招商'] + "])"));
//brand_chart.series[0].setData(eval("([60, 71.15, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])"));
}
});
静态设置series数据 ：X轴
series: [ {
name: '招商',
data: [],
dataLabels: {
enabled: true,
rotation: -90,
color: '#90ed7d',
align: 'top',
x: 4,
y: -10,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
}
}, {
name: '善融',
data: [83.6, 78.8, 98.5, 93.4, 106.0]
}, {
name: '建行',
data: [48.9, 38.8, 39.3, 41.4, 47.0]
}, {
name: '工商',
data: [42.4, 33.2, 34.5, 39.7, 52.6],
dataLabels: {
enabled: true,
rotation: -90,
color: '#666666',
align: 'top',
x: 4,
y: -10,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 0px black'
}
}
},{
name:'民生',
data:[]
},{
name:'淘宝',
data:[]
},{
name:'邮乐',
data:[]
},{
name:'一卡通',
data:[]
}
]