高图从条形饼或条形列向下钻取
Highcharts drilldown from bar-->pie or bar-->column
我需要创建一个具有饼状图钻取的条形图。在所有浏览器中都可以正常工作，但是
你需要更多的解释吗?
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
}
});
}
问题是高图表中的错误。我在3.0.1上运行，这导致了错误，他们在2天前切换到3.0.2，问题已经解决了。
对于任何对从条形图到饼状图的向下钻取图感兴趣的人…您可以在这里找到示例。
代码如下:
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
相关文章：
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 如何通过向下钻取制作高图表箱形图
- 章节文本标签没有't显示在D3.JS向下钻取饼图中
- 高位图向下钻取不起作用
- 高图钻取问题
- 在 hplot R 的饼图中向下钻取
- 高图表 将向下钻取(三层）重置为初始状态
- HighChart饼图点击图例项触发向下钻取
- 手动触发钻取事件，高图
- 在高图中启用“向下钻取”功能，无需修改序列
- 如何使用开源图表API在jsp页面中创建可钻取的条形图
- 高图列没有向下钻取
- 高图从条形饼或条形列向下钻取
- 带下钻的高图，其中主图和下钻图的数据来自不同的XML文件
- 在Highcharts的列图中具有url属性的钻取功能
- 高图5:饼式下钻标签和后退按钮不可见
- 高图:组合双轴与下钻
- 高图表:我想在向下钻取数据数组中创建一个链接
- 柱状图:单击事件仅触发钻取系列
