Мне нужно перейти от столбчатой диаграммы одной серии к столбчатой диаграмме с накоплением (с использованием Highcharts) в Angular 5, есть ли пример / демо?
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<br/>'
},
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 мая) отображается развернутая диаграмма столбца за 6 мая -
Я хочу показать столбчатую диаграмму на развернутом графике (на данный момент существует только легенда, т.е. 6 мая).