Javascript 如何显示在high chart piechart中单击的切片的名称
我有一个饼图（高图）来显示一个部门中不同员工所做的工作。一切正常。现在，我有一个要求，即在单击向下钻取图表时显示单击的切片的名称，以便在下载PDF报告后，我可以知道向下钻取的来源。示例代码如下：Javascript 如何显示在high chart piechart中单击的切片的名称,javascript,highcharts,pie-chart,Javascript,Highcharts,Pie Chart,我有一个饼图（高图）来显示一个部门中不同员工所做的工作。一切正常。现在，我有一个要求，即在单击向下钻取图表时显示单击的切片的名称，以便在下载PDF报告后，我可以知道向下钻取的来源。示例代码如下： $(function () { $('#container').highcharts({ chart: { type: 'pie' }, title: { text: 'Employee Activ
$(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]
]
}]
}
});
});
$（函数（）{
$（“#容器”）。高图({
图表：{
键入：“馅饼”
},
标题：{
文本：“员工活动”
},
副标题:{
文本：“单击切片以查看向下展开。”
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：'{point.name}:{point.y:.1f}%'
}
}
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.name}：{point.y:.2f}占总数的百分比
”
},
系列：[{
名称：“工作量”，
colorByPoint：对，
数据：[{
姓名：“A先生”，
y:56.33，
深入了解：“A先生”
}, {
姓名：“B先生”，
y:24.03，
深入研究：“B先生”
}, {
姓名：“C先生”，
y:10.38，
深入研究：“C先生”
}, {
姓名：“D女士”，
y:4.77，
深入研究：“D女士”
}, {
姓名：“Ms.F”，
y:0.91，
深入分析：“Ms.F”
}, {
姓名：“Z先生”，
y:0.2，
向下展开：null
}]
}],
向下展开：{
系列：[{
姓名：“A先生”，
id:'A先生'，
数据：[
[W1'，24.13]，
[W2'，17.2]，
[W3'，8.11]，
[W4'，5.33]，
[W5'，1.06]，
[W6'，0.5]
]
}, {
姓名：“B先生”，
身份证：“B先生”，
数据：[
[W1'，5]，
[W2'，4.32]，
[W3'，3.68]，
[W4'，2.96]，
[W5'，2.53]，
[W6'，1.45]
]
}, {
姓名：“C先生”，
id:‘C先生’，
数据：[
[W1'，2.76]，
[W2'，2.32]，
[W3'，2.31]，
[W4'，1.27]
]
}, {
姓名：“D女士”，
id:“D女士”，
数据：[
[W1'，2.56]，
[W2'，0.77]，
[W3'，0.42]，
[W4'，0.3]，
[W5'，0.29]，
[W6'，0.26]，
[W7'，0.17]
]
}, {
姓名：“Ms.F”，
id:“F女士”，
数据：[
[W7'，0.34]，
[W9'，0.24]，
[W10'，0.17]，
[W11'，0.16]
]
}]
}
});
});
请帮助我在PDF中显示下载的向下搜索的名称。尝试在代码下面添加代码
exporting: {
filename: 'custom-file-name'
}
现在，您可以根据需要设置文件名。据我所知，您在查找单击的向下搜索的名称时遇到问题。 下面是您如何做到这一点（代码如下）。然后您可以在下载中使用该名称 以下是打印选项的外观：
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]
]
}]
}
});
});
$（函数（）{
$（“#容器”）。高图({
图表：{
键入：“馅饼”
},
标题：{
文本：“员工活动”
},
副标题:{
文本：“单击切片以查看向下展开。”
},
打印选项：{
系列：{
数据标签：{
启用：对，
格式：'{point.name}:{point.y:.1f}%'
},
光标：“指针”，
要点：{
活动：{
单击：函数（）{
//单击的向下搜索名称将在此处发出警报
//您可以在命名PDF时使用它
警报（此名称）；
}
}
}
}
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:“{point.name}：{point.y:.2f}占总数的百分比
”
},
系列：[{
名称：“工作量”，
colorByPoint：对，
数据：[{
姓名：“A先生”，
y:56.33，
深入了解：“A先生”
}, {
姓名：“B先生”，
y:24.03，
深入研究：“B先生”
}, {
姓名：“C先生”，
y:10.38，
深入研究：“C先生”
}, {
姓名：“D女士”，
y:4.77，
深入研究：“D女士”
}, {
姓名：“Ms.F”，
y:0.91，
深入分析：“Ms.F”
}, {
姓名：“Z先生”，
y:0.2，
向下展开：null
}]
}],
向下展开：{
系列：[{
姓名：“A先生”，
id:'A先生'，
数据：[
[W1'，24.13]，
[W2'，17.2]，
[W3'，8.11]，
[W4'，5.33]，
[W5'，1.06]，
[W6'，0.5]
]
}, {
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
}
chart: {
type: 'pie',
events: {
drilldown: function(e) {
this.setTitle({
text: e.seriesOptions.name
});
},
drillup: function(e) {
this.setTitle({
text: 'Employee Activities'
});
}
},
}