Javascript Highcharts从事件单击访问向下展开数据
我试图在单击时显示向下展开系列饼图数据。我能够显示用户单击的饼图系列名称,但不能显示深入数据 以下是一个例子:Javascript Highcharts从事件单击访问向下展开数据,javascript,highcharts,Javascript,Highcharts,我试图在单击时显示向下展开系列饼图数据。我能够显示用户单击的饼图系列名称,但不能显示深入数据 以下是一个例子: $(function () { // Create the chart $('#container').highcharts({ chart: { type: 'pie' }, title: { text: 'Browser market shares. January, 2015 to May, 2015' },
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name)
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33,
drilldown: 'Microsoft Internet Explorer'
}, {
name: 'Chrome',
y: 24.03,
drilldown: 'Chrome'
}, {
name: 'Firefox',
y: 10.38,
drilldown: 'Firefox'
}, {
name: 'Safari',
y: 4.77,
drilldown: 'Safari'
}, {
name: 'Opera',
y: 0.91,
drilldown: 'Opera'
}, {
name: 'Proprietary or Undetectable',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Microsoft Internet Explorer',
id: 'Microsoft Internet Explorer',
data: [
['v11.0', 24.13],
['v8.0', 17.2],
['v9.0', 8.11],
['v10.0', 5.33],
['v6.0', 1.06],
['v7.0', 0.5]
]
}, {
name: 'Chrome',
id: 'Chrome',
data: [
['v40.0', 5],
['v41.0', 4.32],
['v42.0', 3.68],
['v39.0', 2.96],
['v36.0', 2.53],
['v43.0', 1.45],
['v31.0', 1.24],
['v35.0', 0.85],
['v38.0', 0.6],
['v32.0', 0.55],
['v37.0', 0.38],
['v33.0', 0.19],
['v34.0', 0.14],
['v30.0', 0.14]
]
}, {
name: 'Firefox',
id: 'Firefox',
data: [
['v35', 2.76],
['v36', 2.32],
['v37', 2.31],
['v34', 1.27],
['v38', 1.02],
['v31', 0.33],
['v33', 0.22],
['v32', 0.15]
]
}, {
name: 'Safari',
id: 'Safari',
data: [
['v8.0', 2.56],
['v7.1', 0.77],
['v5.1', 0.42],
['v5.0', 0.3],
['v6.1', 0.29],
['v7.0', 0.26],
['v6.2', 0.17]
]
}, {
name: 'Opera',
id: 'Opera',
data: [
['v12.x', 0.34],
['v28', 0.24],
['v27', 0.17],
['v29', 0.16]
]
}]
}
});
});
$(函数(){
//创建图表
$(“#容器”)。高图({
图表:{
键入:“馅饼”
},
标题:{
文字:“浏览器市场份额。2015年1月至2015年5月”
},
副标题:{
text:“单击片段以查看版本。来源:netmarketshare.com。”
},
打印选项:{
系列:{
活动:{
单击:功能(事件){
警报(event.point.name)
}
},
数据标签:{
启用:对,
格式:'{point.name}:{point.y:.1f}%'
}
}
},
工具提示:{
headerFormat:“{series.name}
”,
pointFormat:“{point.name}:{point.y:.2f}占总数的百分比
”
},
系列:[{
名称:'品牌',
colorByPoint:对,
数据:[{
名称:“Microsoft Internet Explorer”,
y:56.33,
深入分析:“Microsoft Internet Explorer”
}, {
名称:“Chrome”,
y:24.03,
向下钻取:“铬”
}, {
名称:“Firefox”,
y:10.38,
深入分析:“Firefox”
}, {
名称:“Safari”,
y:4.77,
深入研究:“狩猎”
}, {
名字:'歌剧',
y:0.91,
深入研究:“歌剧”
}, {
名称:“专有或不可检测”,
y:0.2,
向下展开:null
}]
}],
向下展开:{
系列:[{
名称:“Microsoft Internet Explorer”,
id:“Microsoft Internet Explorer”,
数据:[
[v11.0',24.13],
['v8.0',17.2],
[v9.0',8.11],
[v10.0',5.33],
['v6.0',1.06],
['v7.0',0.5]
]
}, {
名称:“Chrome”,
id:“Chrome”,
数据:[
[v40.0',5],
[v41.0',4.32],
[v42.0',3.68],
[v39.0',2.96],
[v36.0',2.53],
[v43.0',1.45],
[v31.0',1.24],
[v35.0',0.85],
[v38.0',0.6],
[v32.0',0.55],
[v37.0',0.38],
[v33.0',0.19],
[v34.0',0.14],
['v30.0',0.14]
]
}, {
名称:“Firefox”,
id:“Firefox”,
数据:[
[v35',2.76],
[v36',2.32],
[v37',2.31],
[v34',1.27],
[v38',1.02],
[v31',0.33],
[v33',0.22],
[v32',0.15]
]
}, {
名称:“Safari”,
id:'狩猎',
数据:[
['v8.0',2.56],
[v7.1',0.77],
[v5.1',0.42],
['v5.0',0.3],
[v6.1',0.29],
[v7.0',0.26],
['v6.2',0.17]
]
}, {
名字:'歌剧',
id:'歌剧',
数据:[
[v12.x',0.34],
[v28',0.24],
[v27',0.17],
[v29',0.16]
]
}]
}
});
});
我希望访问与用户单击的id对应的深入系列数据,而不是警报(event.point.name)
使用console.log,我认为这会起作用(this.chart.series[0].data[0]),但它显示的是序列数据,而不是深入分析。缺少深入分析饼图所需的drilldown.js
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
请参阅您缺少的drilldown.js,它是深入查看饼图所需的
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
参见答案如下:
this.chart.options.drilldown.series[0].data[0]答案如下:
这个.chart.options.drilldown.series[0].data[0]已经有了它。抱歉没有包含所有代码。我只想在单击时访问深入数据。这是提琴样品。我想说的是点击我想提醒的是向下钻取的数据,而不是向上钻取的系列数据。已经有了。抱歉没有包含所有代码。我只想在单击时访问深入数据。这是提琴样品。我的意思是,单击时,我想提醒向下钻取数据,而不是向上钻取序列数据。