我需要在Angular 5中从单个系列柱形图向下钻取到堆积柱形图(使用Highcharts),是否有任何示例/演示?
component.ts
this.chart41 = new Chart({
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
}
}
}
},
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
'
},
series: [
{
name: "Days",
// colorByPoint: true,
data: [
{
name: "6-May",
y: 62.74,
drilldown: "6-May"
},
{
name: "7-May",
y: 10.57,
drilldown: "7-May"
},
{
name: "8-May",
y: 7.23,
drilldown: "8-May"
},
{
name: "9-May",
y: 5.58,
drilldown: "6-May"
},
{
name: "10-May",
y: 4.02,
drilldown: "10-May"
},
{
name: "11-May",
y: 1.92,
drilldown: "11-May"
},
{
name: "12-May",
y: 7.62,
drilldown: "12-May"
}
]
}
],
drilldown: {
series: [
{
name: "6-May",
id: "6-May",
data: [
[
"P1",
12
],
[
"P2",
12
],
[
"P3",
12
],
[
"P4",
12
]
]
},
{
name: "7-May",
id: "7-May",
data: [
[
"P1",
0.1
],
[
"P2",
1.3
],
[
"P3",
53.02
],
[
"P4",
1.4
]
]
},
{
name: "8-May",
id: "8-May",
data: [
[
"P1",
0.1
],
[
"P2",
1.3
],
[
"P3",
53.02
],
[
"P4",
1.4
]
]
},
{
name: "9-May",
id: "9-May",
data: [
[
"P1",
0.1
],
[
"P2",
1.3
],
[
"P3",
53.02
],
[
"P4",
1.4
]
]
},
{
name: "10-May",
id: "10-May",
data: [
[
"P1",
0.1
],
[
"P2",
1.3
],
[
"P3",
53.02
],
[
"P4",
1.4
]
]
},
{
name: "11-May",
id: "11-May",
data: [
[
"P1",
0.1
],
[
"P2",
1.3
],
[
"P3",
53.02
],
[
"P4",
1.4
]
]
},
{
name: "12-May",
id: "12-May",
data: [
[
"P1",
0.1
],
[
"P2",
1.3
],
[
"P3",
53.02
],
[
"P4",
1.4
]
]
}
]
}
});
视图是这样的 -
点击任意一栏(比如6月5日),它会显示6月5日柱形图的深入分析 -
我想在钻取的下图中显示一个 stacked column chart (截至目前只有传说,即6月5日) .