highcharts 树形图中的点击事件
Click event in treemap in highcharts
单击树状图的最后一级时如何创建 onclick 处理程序?
这是我使用 highcharts (https://jsfiddle.net/r5e0nLkh/2/) 创建树状图的代码。
$('#container').highcharts({
series: [{
type: "treemap",
allowDrillToNode: true,
alternateStartingDirection: true,
levelIsConstant: false,
levels: [{
level: 1,
layoutAlgorithm: 'suarified',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}, {
level: 2,
borderWidth: 0,
layoutAlgorithm: 'stripes',
dataLabels: {
enabled: false
},
color: 'blue'
}],
data: data
}],
title: {
text: 'Intent Distribution'
}
});
现在我想在最后一级创建一个点击事件,例如,如果我点击 say promo,那么我应该可以看到子部分,然后如果我点击任何子部分,我就可以附加一个事件听那个。我可以在 highcharts 教程中看到线图的点击事件,但不确定如何在 treemap 中使用。
通过添加以下方法解决了问题:
$('#container').highcharts({
plotOptions: {
series: {
events: {
click: function (event) {
if(event.point.node.childrenTotal == 0 ){//since last node will have zero childrens
//Perform Task on leaf or last node
}
}
}
},....}
event.point.node.childrenTotal
将包含点击标签的子项数量。
单击树状图的最后一级时如何创建 onclick 处理程序?
这是我使用 highcharts (https://jsfiddle.net/r5e0nLkh/2/) 创建树状图的代码。
$('#container').highcharts({
series: [{
type: "treemap",
allowDrillToNode: true,
alternateStartingDirection: true,
levelIsConstant: false,
levels: [{
level: 1,
layoutAlgorithm: 'suarified',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}, {
level: 2,
borderWidth: 0,
layoutAlgorithm: 'stripes',
dataLabels: {
enabled: false
},
color: 'blue'
}],
data: data
}],
title: {
text: 'Intent Distribution'
}
});
现在我想在最后一级创建一个点击事件,例如,如果我点击 say promo,那么我应该可以看到子部分,然后如果我点击任何子部分,我就可以附加一个事件听那个。我可以在 highcharts 教程中看到线图的点击事件,但不确定如何在 treemap 中使用。
通过添加以下方法解决了问题:
$('#container').highcharts({
plotOptions: {
series: {
events: {
click: function (event) {
if(event.point.node.childrenTotal == 0 ){//since last node will have zero childrens
//Perform Task on leaf or last node
}
}
}
},....}
event.point.node.childrenTotal
将包含点击标签的子项数量。