您好我已经创建了一个Column highchart,如下所示
http://jsfiddle.net/woon123/Lgehd2mb/1/
$(function () {
$('#venue_chart').highcharts({
credits: {
enabled: false
},
title: {
text: 'Popularity of Venues'
},
subtitle: {
text: 'View and Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Users'
}
},
xAxis: {
categories: [
"Chicken Up @ Jurong East",
"Chicken Up @ Tanjong Pagar",
"Chicken Up @ Tampines", ]
},
labels: {
items: [{
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
chart: {
type: 'column'
},
series: [{
name: 'View Count',
data: [{
y: 370,
drilldown: "Chicken Up @ Jurong East" + " view"
}, {
y: 410,
drilldown: "Chicken Up @ Tanjong Pagar" + " view"
}, {
y: 370,
drilldown: "Chicken Up @ Tampines" + " view"
}, ]
}, {
name: 'Redemption Count',
data: [{
y: 224,
drilldown: "Chicken Up @ Jurong East" + " redeem"
}, {
y: 254,
drilldown: "Chicken Up @ Tanjong Pagar" + " redeem"
}, {
y: 224,
drilldown: "Chicken Up @ Tampines" + " redeem"
}, ]
}],
drilldown: {
series: [{
name: "Chicken Up @ Jurong East" + " view",
id: "Chicken Up @ Jurong East" + " view",
data: [
[
"Yangpa Bomb Introductory Promo", 50],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 30],
[
"Soju Cocktails at $17.00", 50],
[
"4pcs Fried Chicken @ $8.00", 20],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10],
[
"12345678", 210], ]
}, {
name: "Chicken Up @ Jurong East" + " redeem",
id: "Chicken Up @ Jurong East" + " redeem",
data: [
[
"Yangpa Bomb Introductory Promo", 40],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 20],
[
"Soju Cocktails at $17.00", 40],
[
"4pcs Fried Chicken @ $8.00", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 8],
[
"12345678", 101], ]
}, {
name: "Chicken Up @ Tanjong Pagar" + " view",
id: "Chicken Up @ Tanjong Pagar" + " view",
data: [
[
"Yangpa Bomb Introductory Promo", 50],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 30],
[
"Soju Cocktails at $17.00", 50],
[
"4pcs Fried Chicken @ $8.00", 20],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10],
[
"Early Bird 20% Off Bill", 40],
[
"12345678", 210], ]
}, {
name: "Chicken Up @ Tanjong Pagar" + " redeem",
id: "Chicken Up @ Tanjong Pagar" + " redeem",
data: [
[
"Yangpa Bomb Introductory Promo", 40],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 20],
[
"Soju Cocktails at $17.00", 40],
[
"4pcs Fried Chicken @ $8.00", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 8],
[
"Early Bird 20% Off Bill", 30],
[
"12345678", 101], ]
}, {
name: "Chicken Up @ Tampines" + " view",
id: "Chicken Up @ Tampines" + " view",
data: [
[
"Yangpa Bomb Introductory Promo", 50],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 30],
[
"Soju Cocktails at $17.00", 50],
[
"4pcs Fried Chicken @ $8.00", 20],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10],
[
"12345678", 210], ]
}, {
name: "Chicken Up @ Tampines" + " redeem",
id: "Chicken Up @ Tampines" + " redeem",
data: [
[
"Yangpa Bomb Introductory Promo", 40],
[
"1 For 1 Chicken Up Wings and Korean Bingsu", 20],
[
"Soju Cocktails at $17.00", 40],
[
"4pcs Fried Chicken @ $8.00", 15],
[
"50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 8],
[
"12345678", 101], ]
}, ]
}
});
});
我的问题是我无法深入工作。
我已遵循此处Highcharts xAxis drilldown dont change correctly的说明,但仍然无效。
有人可以指导我这件事吗?谢谢!
答案 0 :(得分:1)
您需要添加drilldown.js参考
<script src="http://code.highcharts.com/modules/drilldown.js"></script>