high chart-piechart如何显示点击哪个切片的名称
How to show the name of which slice is clicked in high chart-piechart
我有一个饼图（high chart）来显示部门中不同员工所做的工作。一切正常。现在我有一个要求，当点击钻取图表时，显示点击哪个切片的名称，以便在下载 PDF 报告后我可以知道钻取的来源 down.Sample 代码如下：
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Employee Activities'
},
subtitle: {
text: 'Click the slices to view drilldown.'
},
plotOptions: {
series: {
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: 'Work Load',
colorByPoint: true,
data: [{
name: 'Mr.A',
y: 56.33,
drilldown: 'Mr.A'
}, {
name: 'Mr.B',
y: 24.03,
drilldown: 'Mr.B'
}, {
name: 'Mr.C',
y: 10.38,
drilldown: 'Mr.C'
}, {
name: 'Ms.D',
y: 4.77,
drilldown: 'Ms.D'
}, {
name: 'Ms.F',
y: 0.91,
drilldown: 'Ms.F'
}, {
name: 'Mr.Z',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Mr.A',
id: 'Mr.A',
data: [
['W1', 24.13],
['W2', 17.2],
['W3', 8.11],
['W4', 5.33],
['W5', 1.06],
['W6', 0.5]
]
}, {
name: 'Mr.B',
id: 'Mr.B',
data: [
['W1', 5],
['W2', 4.32],
['W3', 3.68],
['W4', 2.96],
['W5', 2.53],
['W6', 1.45]
]
}, {
name: 'Mr.C',
id: 'Mr.C',
data: [
['W1', 2.76],
['W2', 2.32],
['W3', 2.31],
['W4', 1.27]
]
}, {
name: 'Ms.D',
id: 'Ms.D',
data: [
['W1', 2.56],
['W2', 0.77],
['W3', 0.42],
['W4', 0.3],
['W5', 0.29],
['W6', 0.26],
['W7', 0.17]
]
}, {
name: 'Ms.F',
id: 'Ms.F',
data: [
['W7', 0.34],
['W9', 0.24],
['W10', 0.17],
['W11', 0.16]
]
}]
}
});
});
现在如果我下载向下钻取图表，PDF 不显示下载的切片的名称。
请帮助我显示在 PDF 中下载的钻取名称。
尝试在代码下方添加代码
exporting: {
filename: 'custom-file-name'
}
现在您可以根据需要设置文件名了。
据我了解，您在查找所单击的向下钻取的名称时遇到了问题。
下面是如何做到这一点 JSFiddle（代码如下）。然后您可以在下载中使用该名称。
你的 plotOptions 应该是这样的：
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
cursor: 'pointer',
point: {
events: {
click: function () {
//Clicked drilldown name will be alerted here
//You can use it in naming PDF
alert(this.name);
}
}
}
}
},
...这是完整代码：
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Employee Activities'
},
subtitle: {
text: 'Click the slices to view drilldown.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
cursor: 'pointer',
point: {
events: {
click: function () {
//Clicked drilldown name will be alerted here
//You can use it in naming PDF
alert(this.name);
}
}
}
}
},
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: 'Work Load',
colorByPoint: true,
data: [{
name: 'Mr.A',
y: 56.33,
drilldown: 'Mr.A'
}, {
name: 'Mr.B',
y: 24.03,
drilldown: 'Mr.B'
}, {
name: 'Mr.C',
y: 10.38,
drilldown: 'Mr.C'
}, {
name: 'Ms.D',
y: 4.77,
drilldown: 'Ms.D'
}, {
name: 'Ms.F',
y: 0.91,
drilldown: 'Ms.F'
}, {
name: 'Mr.Z',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Mr.A',
id: 'Mr.A',
data: [
['W1', 24.13],
['W2', 17.2],
['W3', 8.11],
['W4', 5.33],
['W5', 1.06],
['W6', 0.5]
]
}, {
name: 'Mr.B',
id: 'Mr.B',
data: [
['W1', 5],
['W2', 4.32],
['W3', 3.68],
['W4', 2.96],
['W5', 2.53],
['W6', 1.45]
]
}, {
name: 'Mr.C',
id: 'Mr.C',
data: [
['W1', 2.76],
['W2', 2.32],
['W3', 2.31],
['W4', 1.27]
]
}, {
name: 'Ms.D',
id: 'Ms.D',
data: [
['W1', 2.56],
['W2', 0.77],
['W3', 0.42],
['W4', 0.3],
['W5', 0.29],
['W6', 0.26],
['W7', 0.17]
]
}, {
name: 'Ms.F',
id: 'Ms.F',
data: [
['W7', 0.34],
['W9', 0.24],
['W10', 0.17],
['W11', 0.16]
]
}]
}
});
});
可以在图表->事件->drilldown/drillup事件中设置标题。
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
}
可以找到相同的工作 fiddle here
所以您的最终图表节点将如下所示。
chart: {
type: 'pie',
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
},
}
我有一个饼图（high chart）来显示部门中不同员工所做的工作。一切正常。现在我有一个要求，当点击钻取图表时，显示点击哪个切片的名称，以便在下载 PDF 报告后我可以知道钻取的来源 down.Sample 代码如下：
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Employee Activities'
},
subtitle: {
text: 'Click the slices to view drilldown.'
},
plotOptions: {
series: {
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: 'Work Load',
colorByPoint: true,
data: [{
name: 'Mr.A',
y: 56.33,
drilldown: 'Mr.A'
}, {
name: 'Mr.B',
y: 24.03,
drilldown: 'Mr.B'
}, {
name: 'Mr.C',
y: 10.38,
drilldown: 'Mr.C'
}, {
name: 'Ms.D',
y: 4.77,
drilldown: 'Ms.D'
}, {
name: 'Ms.F',
y: 0.91,
drilldown: 'Ms.F'
}, {
name: 'Mr.Z',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Mr.A',
id: 'Mr.A',
data: [
['W1', 24.13],
['W2', 17.2],
['W3', 8.11],
['W4', 5.33],
['W5', 1.06],
['W6', 0.5]
]
}, {
name: 'Mr.B',
id: 'Mr.B',
data: [
['W1', 5],
['W2', 4.32],
['W3', 3.68],
['W4', 2.96],
['W5', 2.53],
['W6', 1.45]
]
}, {
name: 'Mr.C',
id: 'Mr.C',
data: [
['W1', 2.76],
['W2', 2.32],
['W3', 2.31],
['W4', 1.27]
]
}, {
name: 'Ms.D',
id: 'Ms.D',
data: [
['W1', 2.56],
['W2', 0.77],
['W3', 0.42],
['W4', 0.3],
['W5', 0.29],
['W6', 0.26],
['W7', 0.17]
]
}, {
name: 'Ms.F',
id: 'Ms.F',
data: [
['W7', 0.34],
['W9', 0.24],
['W10', 0.17],
['W11', 0.16]
]
}]
}
});
});
现在如果我下载向下钻取图表，PDF 不显示下载的切片的名称。
请帮助我显示在 PDF 中下载的钻取名称。
尝试在代码下方添加代码
exporting: {
filename: 'custom-file-name'
}
现在您可以根据需要设置文件名了。
据我了解，您在查找所单击的向下钻取的名称时遇到了问题。 下面是如何做到这一点 JSFiddle（代码如下）。然后您可以在下载中使用该名称。
你的 plotOptions 应该是这样的：
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
cursor: 'pointer',
point: {
events: {
click: function () {
//Clicked drilldown name will be alerted here
//You can use it in naming PDF
alert(this.name);
}
}
}
}
},
...这是完整代码：
$(function () {
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Employee Activities'
},
subtitle: {
text: 'Click the slices to view drilldown.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
},
cursor: 'pointer',
point: {
events: {
click: function () {
//Clicked drilldown name will be alerted here
//You can use it in naming PDF
alert(this.name);
}
}
}
}
},
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: 'Work Load',
colorByPoint: true,
data: [{
name: 'Mr.A',
y: 56.33,
drilldown: 'Mr.A'
}, {
name: 'Mr.B',
y: 24.03,
drilldown: 'Mr.B'
}, {
name: 'Mr.C',
y: 10.38,
drilldown: 'Mr.C'
}, {
name: 'Ms.D',
y: 4.77,
drilldown: 'Ms.D'
}, {
name: 'Ms.F',
y: 0.91,
drilldown: 'Ms.F'
}, {
name: 'Mr.Z',
y: 0.2,
drilldown: null
}]
}],
drilldown: {
series: [{
name: 'Mr.A',
id: 'Mr.A',
data: [
['W1', 24.13],
['W2', 17.2],
['W3', 8.11],
['W4', 5.33],
['W5', 1.06],
['W6', 0.5]
]
}, {
name: 'Mr.B',
id: 'Mr.B',
data: [
['W1', 5],
['W2', 4.32],
['W3', 3.68],
['W4', 2.96],
['W5', 2.53],
['W6', 1.45]
]
}, {
name: 'Mr.C',
id: 'Mr.C',
data: [
['W1', 2.76],
['W2', 2.32],
['W3', 2.31],
['W4', 1.27]
]
}, {
name: 'Ms.D',
id: 'Ms.D',
data: [
['W1', 2.56],
['W2', 0.77],
['W3', 0.42],
['W4', 0.3],
['W5', 0.29],
['W6', 0.26],
['W7', 0.17]
]
}, {
name: 'Ms.F',
id: 'Ms.F',
data: [
['W7', 0.34],
['W9', 0.24],
['W10', 0.17],
['W11', 0.16]
]
}]
}
});
});
可以在图表->事件->drilldown/drillup事件中设置标题。
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
}
可以找到相同的工作 fiddle here
所以您的最终图表节点将如下所示。
chart: {
type: 'pie',
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
},
}