Highchart:使单个系列可滚动并在向下钻取时更改x轴变量
Highchart:使单个系列可滚动并在向下钻取时更改x轴变量
提问于 2015-10-24 17:40:23
在我问我的问题之前，这里是我的jsfiddle http://jsfiddle.net/woon123/9155d4z6/1/
$(document).ready(function () {
$('#deal_venue_chart').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Popularity of Deals in Venues'
},
subtitle: {
text: 'Redemption Count'
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of Redeems'
}
},
scrollbar: {
enabled: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
align: 'center',
color: '#000000',
overflow: 'justify',
crop: true
},
pointWidth: 150
}
},
xAxis: {
min: 0,
max: 0,
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30
},
series: [{
name: '<span style="color: #00910c">Active: </span>' + '1 Free Soju Cocktails for every Main Meal Purchased',
data: [{
name: "Deals",
y: 718,
drilldown: "1 Free Soju Cocktails for every Main Meal Purchased" + " active",
dataLabels: {
format: "1 Free Soju Cocktails for every Main Meal Purchased"
}
}]
}, {
name: '<span style="color: #00910c">Active: </span>' + '4pcs Fried Chicken @ $8.00',
data: [{
name: "Deals",
y: 746,
drilldown: "4pcs Fried Chicken @ $8.00" + " active",
dataLabels: {
format: "4pcs Fried Chicken @ $8.00"
}
}]
}, {
name: '<span style="color: #00910c">Active: </span>' + '50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!',
data: [{
name: "Deals",
y: 365,
drilldown: "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!" + " active",
dataLabels: {
format: "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!"
}
}]
},
{
id: "1 For 1 Chicken Up Wings and Korean Bingsu" + ' (Redemption Count)',
name: '<span style="color: #df1007">Expired: </span>' + '1 For 1 Chicken Up Wings and Korean Bingsu',
data: [{
name: "Deals",
y: 1039,
drilldown: "1 For 1 Chicken Up Wings and Korean Bingsu" + " past",
dataLabels: {
format: "1 For 1 Chicken Up Wings and Korean Bingsu"
}
}],
visible: false
}, ],
drilldown: {
series: [{
name: "Venues",
id: "1 Free Soju Cocktails for every Main Meal Purchased" + " active",
data: [
[
"Chicken Up @ Jurong East", 310],
[
"Chicken Up @ Tampines", 171],
[
"Chicken Up @ Tanjong Pagar", 237], ]
}, {
name: "Venues",
id: "4pcs Fried Chicken @ $8.00" + " active",
data: [
[
"Chicken Up @ Jurong East", 242],
[
"Chicken Up @ Tampines", 337],
[
"Chicken Up @ Tanjong Pagar", 167], ]
}, {
name: "Venues",
id: "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!" + " active",
data: [
[
"Chicken Up @ Jurong East", 69],
[
"Chicken Up @ Tampines", 132],
[
"Chicken Up @ Tanjong Pagar", 164], ]
},
{
name: "Venues",
id: "1 For 1 Chicken Up Wings and Korean Bingsu" + " past",
data: [
[
"Chicken Up @ Jurong East", 381],
[
"Chicken Up @ Tampines", 214],
[
"Chicken Up @ Tanjong Pagar", 444], ]
},
]
}
});
});我有两个问题希望能得到回答。
首先，在我向下钻取之前，我只有一个系列，我正在尝试使这个系列可滚动。然而，这并不能解决问题。我的整个系列仍然被压在一起，这是我试图避免的。另外，由于我将增加列数，因此不可能为列设置较小的大小以适合。
我的第二个问题是，根据我所知，我需要声明x轴的最小和最大值才能使滚动条工作。在我向下钻取之前，只有一个序列，所以min和max都是0。但是，在我向下钻取之后，我可能会得到3个或更多系列。在这种情况下，我的min应该是0，而max应该是2。我该如何更改min和max呢？我知道这样的代码可以帮助在向下钻取和向上钻取的情况下更改图表的标题，如下所示
chart: {
type: 'column',
events: {
drilldown: function (e) {
this.setTitle({text: "Popularity of Deal of Deal Type " + e.point.name});
},
drillup: function (e) {
this.setTitle({text: 'Popularity of Deal Types'});
}
}
}然而，我似乎找不到函数来帮助改变x轴的最小和最大值。
如果有任何帮助我将不胜感激，谢谢！
回答 1
Stack Overflow用户
发布于 2015-10-26 10:59:24
1)当您需要滚动类别时，设置min/max，然后为每个点定义单独的x。在你的例子中，你在同一只猫上拥有的所有点。
2)在drilldown / drillup事件中，可以调用setExtremes。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33321298
复制相关文章
相似问题
腾讯云开发者
