http://jsfiddle.net/cgelinas78/pLDeq/54/
一些东西...
- 为什么美元金额没有显示在左侧 y 轴上？
- 当一个人向下钻取第一列然后返回时 - 为什么“预算”系列会变黑？
这是我的代码：
$(function(){
function setChartColumn(name, categories, data, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
while(chart.series.length>0)
chart.series[0].remove();
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: (i == 0 ? 'column' : 'spline'),
name: name[i],
data: data[i],
color: colors[i]
});
}
}
function setChart(name, categories, data, color, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
} else {
for(var i = 0; i< chart.series.length; i++){
chart.series[i].remove();
}
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
stacking: 'normal',
data: data[i],
color: color || 'white'
});
}
}
var colors = Highcharts.getOptions().colors;
var categories = ['Jan','Feb','Mar','Apr','May','Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
name = 'Expenses',
name2 = 'Budget',
data = [
{
y:100,
drilldown: {
name:'Marketing',
type:'column',
categories:['Silverline','Google','CNN'],
data:[
{name:'Recommedation',y:15},
{name: 'Legal Fees', y:50},
{name: 'Click Ads', y:35}
],
color: colors[0]
}
},
{
y:402,
drilldown: {
name:'Expenses',
type:'column',
categories:['1','2','3','4'],
data:[
{name:'Recommedation',y:67},
{name:'Recommedation',y:34},
{name:'Recommedation',y:1},
{name:'Recommedation',y:11}
],
color: colors[0]
}
},
{
y:343,
drilldown: {
name:'Misc',
type:'column',
categories:['A', 'B', 'C'],
data:[
{name:'Recommendation',y:82},
{name:'Area',y:5},
{name:'Observation',y:6}
],
color: colors[0]
}
},
{
y:175,
drilldown: {
name:'A',
type:'column',
categories:['B','C','D'],
data:[
{name:'Recommendation',y:17},
{name:'Recommendation',y:20},
{name:'Recommendation',y:50}
],
color: colors[0]
}
},
{
y:229,
drilldown: {
name:'Expense 1',
type:'column',
categories:['Category 1'],
data:[
{name:'Recommendation',y:15},
{name:'Observation',y:2}],
color: colors[0]
}
},
{
y:533
},
{y:166},
{y:445},
{y:312},
{y:310},
{y:230},
{y:40}],
data2 = [1000,990,851,805,729,699, 650, 550, 450, 350, 250, 150, 50];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: '2013 Mizuho Budget'
},
subtitle: {
text: 'Click for more details and click to return.'
},
xAxis: [{
categories: categories
}],
yAxis: [{
labels: {
formatter: function(){
return '$' + this.value;
},
style: { color: '#89A54E' }
},
title: {
text: 'Budget',
style: { color: '#89A54E' }
},
opposite: true
},
{ // Secondary yAxis
gridLineWidth: 0,
labels: {
formatter: function() {
return '$' + this.value;
},
style: {color: '#4572A7'}
},
title: {
text: 'Expenses',
style: {color: '#4572A7'}
}
}],
plotOptions: {
spline: { showInLegend: true},
column: {
cursor: 'pointer',
point: {
events: {
click:
function() {
var drilldown = this.drilldown;
if (drilldown) {
setChart([drilldown.name, drilldown.name1, drilldown.name2, drilldown.name3, drilldown.name4, drilldown.name5], drilldown.categories, [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5], drilldown.color, [drilldown.type]);
} else {
setChartColumn([name,name2], categories, [data,data2], ['column','column']);
}
}
}
},
showInLegend: true,
dataLabels: {
enabled: false,
color: colors[0],
style: { fontWeight: 'bold' },
formatter: function() {
return '$' + this.y;
}
}
}
},
tooltip: { shared: true },
credits:{ enabled:false },
legend: { backgroundColor: '#FFFFFF' },
series: [{
name: name,
color: '#4572A7',
type: 'column',
data: data
},
{
name: name2,
color: '#89A54E',
type: 'spline',
data: data2
}]
});
});