我一直在拉我的头发试图通过向下钻取这个高图不规则样条并且无法使钻取工作。我是高级图表的新手,我认为它可能与我的语法有关。我引用了API并尝试了一些没有运气的方法。
问题:我希望得到一个不规则的样条曲线,以按月显示水果数量。然后,钻取将显示水果类型(苹果和橙子)的计数。我能够显示水果的数量但是钻取不起作用。
代码如下:http://jsfiddle.net/bu2002/352a0zvr/2/
非常感谢所有人!!!
$(document).ready(function(){
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'count'
},
min: 0
},
series: [{
name: 'Fruits',
data: [
[Date.UTC(2014, 7, 19),12],
[Date.UTC(2014, 8, 19),5],
[Date.UTC(2014, 9, 19),18]
],
drilldown: 'fruits'
},
{
name: 'Animals',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
drilldown: 'animals'
}
],//end series
drilldown: {
series: [{
id: 'animals',
data: [[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]],
},
{
id: 'fruits',
data: [
[Date.UTC(2014, 7, 29),15],
[Date.UTC(2014, 8, 11),11],
[Date.UTC(2014, 9, 22),38]
],
}
]
}//end drilldown
};//and options
var chart = new Highcharts.Chart(options);
});
答案 0 :(得分:2)
问题是你现在正在为这个系列提供drilldown.id
。你需要每点做一次。例如:
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
在我看来,你想要对#34; Fruits"中的某个点进行深入研究。链接到相同的钻取系列。这是可行的:
series: [{
name: 'Fruits',
data: [{
x: Date.UTC(2014, 7, 19),
y: 12,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 8, 19),
y: 5,
drilldown: 'fruits'
}, {
x: Date.UTC(2014, 9, 19),
y: 18,
drilldown: 'fruits'
}]
},
请参阅更新fiddle。
答案 1 :(得分:0)
但是在这里,在单击水果后,U也不会得到2个样条线,而您只能得到1个。 有没有办法解决这个问题,因为我遇到同样的问题 小提琴https://jsfiddle.net/surya_swami/zx9dy3uj/40/
drilldown: { series: [{id:"z1",name: "Region-1",
data: [{ name : "July",y: 10},
{ name : "Aug",y: 21},
{ name : "Sept",y: 15}]
},
{id:"z1",name: "Region-2",
data: [{ name : "July",y: 12},
{ name : "Aug",y: 9},
{ name : "Sept",y: 25}]
},
{ id:'z2',name:'Region-3',
data : [{name:'July',y:23},
{name:'Aug',y:41},
{name:'Sept',y:31}]
},
{ id:'z2',name:'Region-4',
data : [{name:'July',y:33},
{name:'Aug',y:23},
{name:'Sept',y:12}]
},
{ id:'z2',name:'Region-5',
data : [{name:'July',y:31},
{name:'Aug',y:39},
{name:'Sept',y:19}]
}
]
}