问题
I need to create a bar-chart with a pie-chart drill down. Everything works fine in all browsers but
Do you need more explanations?
function activities(params) {
//params coming from statistics controller
var title_activities = params['title_activities'],
source_activities = params['source_activities'],
link_activities = params['link_activities'],
credits_databasis_str_activities = params['credits_databasis_str_activities'],
activities_category_names = params['activities_category_names'],
activities_category_data = params['activities_category_data'],
room_filter_name = params['room_filter_name']
var colors = Highcharts.getOptions().colors,
categories = activities_category_names,
name = 'Activities',
data = activities_category_data
function setChart(chart, options) {
chart.series[0].remove(false);
chart.xAxis[0].setCategories(options.categories, false);
chart.addSeries({
type: options.type,
name: options.name,
data: options.data,
color: options.color || colors[0]
}, false);
//chart.options.spacingRight = 35; //not working
//chart.yAxis.title = "Test"; //not working
chart.redraw();
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'activities_chart',
type: 'bar',
spacingRight: 15
//spacingLeft: 15
},
title: {
text: title_activities
},
subtitle: {
text: 'Current room: ' + room_filter_name
},
credits: {
text: "Databasis: " + credits_databasis_str_activities + " households" + " | Source: " + source_activities,
href: link_activities
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: null
},
max: 100
},
plotOptions: {
bar: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
var options;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: "Activities - " + drilldown.name
});
options = {
'name': drilldown.name,
'categories': drilldown.categories,
'data': drilldown.data,
'type': 'pie'
};
} else { // restore
this.series.chart.setTitle({
text: "Activities"
});
options = {
'name': name,
'categories': categories,
'data': data,
'type': 'bar'
};
}
setChart(this.series.chart, options);
}
}
}
},
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
var options;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: "Activities - " + drilldown.name
});
options = {
'name': drilldown.name,
'categories': drilldown.categories,
'data': drilldown.data,
'type': 'pie'
};
} else { // restore
this.series.chart.setTitle({
text: "Activities"
});
options = {
'name': name,
'categories': categories,
'data': data,
'type': 'bar'
};
}
setChart(this.series.chart, options);
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
connectorColor: colors[0],
distance: 15,
formatter: function() {
var label_String = this.point.name;
if (label_String.length > 16) {
label_String = label_String.substring(0,16) + "..."
};
return '<b>'+ label_String +'</b>: '+ this.y;
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = ""
if (point.drilldown) {
s += this.x +':<b>'+ this.y +' % of households</b><br/>';
s += 'Click to view '+ point.category +' details';
} else {
s += point.name +':<b>'+ this.y +' times chosen</b><br/>';
s += 'Click to return to activities overview';
}
return s;
}
},
series: [{
type: 'bar',
name: name,
data: data
}],
exporting: {
enabled: false
}
});
}
回答1:
The problem was an error in high charts. I was running on 3.0.1 which caused the error, they switched to 3.0.2 2 days ago and the problem is fixed.
For anybody who is interested in a drill down-chart from bar to pie...here you can find the example.
And here is the code:
HTML:
<script src="http://code.highcharts.com/3.0.2/highcharts.js"></script>
<div id="activities_chart" style="width: 100%; height: 340px;"></div>
JS:
$(function () {
var title_activities = "Activities",
source_activities = "My source",
link_activities = "http://www.highcharts.com",
credits_databasis_str_activities = "215",
activities_category_names = ["eat", "read", "surf in internet"],
activities_category_data = [{y:66.15, drilldown:{name:"eat - How often?", data:[["1 time per day", 21], ["3 times per day", 45], ["2 times per day", 27], ["2 times a week", 3], ["≥ 3 times a week", 5], ["less", 4], ["every other week", 3], ["1 times a week", 7], ["not specified", 6], ["once a month", 6]]}}, {y:67.71, drilldown:{name:"read - How much time?", data:[["2h per day", 11], ["1h per day", 41], ["less often", 6], ["2h per week", 8], ["1/2h per day", 38], ["1h per week", 10], ["3h per week", 4], ["≥ 3h per day", 5], ["not specified", 7]]}}, {y:59.38, drilldown:{name:"surf in internet - How much time?", data:[["2h per day", 31], ["1h per week", 1], ["2h per week", 2], ["1h per day", 37], ["1/2h per day", 20], ["≥ 3h per day", 13], ["less often", 3], ["not specified", 5], ["3h per week", 2]]}}],
room_filter_name = "Living Room"
var colors = Highcharts.getOptions().colors,
categories = activities_category_names,
name = 'Activities',
data = activities_category_data
function setChart(chart, options) {
var max = chart.series.length;
for (var i = 0; i < max; i++) {
chart.series[0].remove(false);
}
chart.xAxis[0].setCategories(options.categories, false);
chart.addSeries({
type: options.type,
name: options.name,
data: options.data,
color: colors[0]
}, false);
chart.redraw();
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'activities_chart',
type: 'bar',
spacingRight: 15
},
title: {
text: title_activities
},
subtitle: {
text: 'Current room: ' + room_filter_name
},
credits: {
text: "Databasis: " + credits_databasis_str_activities + " households" + " | Source: " + source_activities,
href: link_activities
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: null
},
max: 100
},
plotOptions: {
bar: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
this.series.chart.setTitle({
text: "Activities - " + drilldown.name
});
var options = {
'name': drilldown.name,
'categories': drilldown.categories,
'data': drilldown.data,
'type': 'pie'
};
setChart(this.series.chart, options);
}
}
}
},
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
this.series.chart.setTitle({
text: "Activities"
});
var options = {
'name': name,
'categories': categories,
'data': data,
'type': 'bar'
};
setChart(this.series.chart, options);
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
connectorColor: colors[0],
distance: 15,
formatter: function() {
var label_String = this.point.name;
if (label_String.length > 16) {
label_String = label_String.substring(0,16) + "..."
};
return '<b>'+ label_String +'</b>: '+ this.y;
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = ""
if (point.drilldown) {
s += this.x +':<b>'+ this.y +' % of households</b><br/>';
s += 'Click to view '+ point.category +' details';
} else {
s += point.name +':<b>'+ this.y +' times chosen</b><br/>';
s += 'Click to return to activities overview';
}
return s;
}
},
series: [{
type: 'bar',
name: name,
data: data
}],
exporting: {
enabled: false
}
})
}); //end
来源：https://stackoverflow.com/questions/17004614/highcharts-drilldown-from-bar-pie-or-bar-column