Highcharts - 向下钻取中的堆栈图到堆栈图
Highcharts - Stack Chart to Stack Chart in Drilldown
希望有人能提供帮助，我已经搜索了这方面的示例，但无法让它们适用于我的特定设置。我在 Highcharts 中有一个堆积柱形图，代表一周中每一天的 5 组数据。
然后我 select 一天查看一天的每小时细分，我有数据通过但我无法获得每个小时的 5 个值相互叠加. （与第一个图表的方式相同）-理想情况下，第二个图表是面积图）
这是我的代码：
$(function () {
Highcharts.setOptions({
lang: {
drillUpText: 'Reset'
}
});
// Create the chart
$('#chart2').highcharts({
chart: {
type: 'column',
height: 300
},
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: 'Select a day to expand to hourly data'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
var point = this.point,
s = 'Day: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>';
if (point.drilldown) {
s = 'Day: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>Select to view hours';
} else {
s = 'Time: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>Reset to return';
}
return s;
}
},
xAxis: {
type: 'category',
//categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
},
yAxis: {
title: false, // {text: 'Utilisation'}, Y axis title - taken text out
tickPositions: [0, 50, 70, 100], // Y axis labels
labels: {
format: '{value}%' // Y axis labels with % suffix
},
min: 0, // Following lines setting the grids to off adding min max
max: 100,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Below Avg.
from: 0,
to: 50,
color: 'rgba(255,108,96, 0.5)',
label: {
// text: 'Below Average',
style: {
color: 'rgba(153,194,98, 0.8)'
}
}
}, { // Average
from: 50,
to: 70,
color: 'rgba(248,211,71, 0.5)',
label: {
// text: 'Average',
style: {
color: 'rgba(153,194,98, 0.8)'
}
}
}, { // Above Avg.
from: 70,
to: 100,
color: 'rgba(153,194,98, 0.5)',
label: {
text: 'Above Average',
style: {
color: 'rgba(153,194,98, 0.8)'
}
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Status 5',
color: '#86C9F2',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a5?>]
}, {
type: 'column',
name: 'Status 4',
color: '#6FB2DB',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a4?>]
}, {
type: 'column',
name: 'Status 3',
color: '#589BC4',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a3?>]
}, {
type: 'column',
name: 'Status 2',
color: '#4184AD',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a2?>]
}, {
type: 'column',
name: 'At the Desk',
color: '#2B6E97', //rgb(43, 110, 151)
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a?>]
}],
drilldown: {
drillUpButton: {
//relativeTo: 'spacingBox',
position: {
y: 10,
x: -10
},
theme: {
fill: 'white',
stroke: 'silver',
r: 2,
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
}
}
}
}
},
series: [{
type: 'column',
id: 'D2',
data: [['8', 13.77],['8', 2.74],['8', 1.27],['8', 2.64],['8', 2.28],['9', 29.30],['9', 6.44],['9', 3.79],['9', 5.11],['9', 5.32],['10', 36.41],['10', 9.01],['10', 5.47],['10', 7.11],['10', 7.06],['11', 34.12],['11', 7.50],['11', 4.48],['11', 10.02],['11', 8.28],['12', 26.82],['12', 5.03],['12', 5.79],['12', 15.00],['12', 10.27],['13', 30.08],['13', 5.40],['13', 5.34],['13', 11.73],['13', 9.57],['14', 33.90],['14', 7.75],['14', 4.78],['14', 6.41],['14', 9.33],['15', 33.27],['15', 7.73],['15', 4.95],['15', 8.11],['15', 7.09],['16', 31.29],['16', 8.53],['16', 4.51],['16', 6.44],['16', 5.81],['17', 17.36],['17', 3.87],['17', 2.06],['17', 4.47],['17', 3.42],['18', 4.79],['18', .38],['18', .79],['18', 1.44],['18', 2.45]]
}, {
type: 'area',
id: 'D3',
data: [<?php echo $data7b2?>]
}, {
type: 'area',
id: 'D4',
data: [<?php echo $data7b3?>]
}, {
type: 'area',
id: 'D5',
data: [<?php echo $data7b4?>]
}, {
type: 'area',
id: 'D6',
data: [<?php echo $data7b5?>]
}]
}
});
});
我已经展示了第一个向下钻取数据，因此您可以看到结构。任何帮助将不胜感激。
谢谢
罗布
您可以将向下钻取数据的类型从 ['time', data] 更改为 [time, data]：
data: [
['8', 13.77],
['8', 2.74],
['8', 1.27],
['8', 2.64],
['8', 2.28],
['9', 29.30],
['9', 6.44],
['9', 3.79],
['9', 5.11],
['9', 5.32],
...
]
至：
data: [
[8, 13.77],
[8, 2.74],
[8, 1.27],
[8, 2.64],
[8, 2.28],
[9, 29.30],
[9, 6.44],
[9, 3.79],
[9, 5.11],
[9, 5.32],
...
]
而且我还更改了 tooltip.formatter 以显示正确的向下钻取工具提示。这是 DEMO
希望有人能提供帮助，我已经搜索了这方面的示例，但无法让它们适用于我的特定设置。我在 Highcharts 中有一个堆积柱形图，代表一周中每一天的 5 组数据。
然后我 select 一天查看一天的每小时细分，我有数据通过但我无法获得每个小时的 5 个值相互叠加. （与第一个图表的方式相同）-理想情况下，第二个图表是面积图）
这是我的代码：
$(function () {
Highcharts.setOptions({
lang: {
drillUpText: 'Reset'
}
});
// Create the chart
$('#chart2').highcharts({
chart: {
type: 'column',
height: 300
},
credits: {
enabled: false
},
title: {
text: null
},
subtitle: {
text: 'Select a day to expand to hourly data'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
var point = this.point,
s = 'Day: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>';
if (point.drilldown) {
s = 'Day: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>Select to view hours';
} else {
s = 'Time: <b>' + point.name + '</b><br/>Utilisation: <b>' + this.y + '% </b><br/>Reset to return';
}
return s;
}
},
xAxis: {
type: 'category',
//categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
},
yAxis: {
title: false, // {text: 'Utilisation'}, Y axis title - taken text out
tickPositions: [0, 50, 70, 100], // Y axis labels
labels: {
format: '{value}%' // Y axis labels with % suffix
},
min: 0, // Following lines setting the grids to off adding min max
max: 100,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Below Avg.
from: 0,
to: 50,
color: 'rgba(255,108,96, 0.5)',
label: {
// text: 'Below Average',
style: {
color: 'rgba(153,194,98, 0.8)'
}
}
}, { // Average
from: 50,
to: 70,
color: 'rgba(248,211,71, 0.5)',
label: {
// text: 'Average',
style: {
color: 'rgba(153,194,98, 0.8)'
}
}
}, { // Above Avg.
from: 70,
to: 100,
color: 'rgba(153,194,98, 0.5)',
label: {
text: 'Above Average',
style: {
color: 'rgba(153,194,98, 0.8)'
}
}
}]
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
type: 'column',
name: 'Status 5',
color: '#86C9F2',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a5?>]
}, {
type: 'column',
name: 'Status 4',
color: '#6FB2DB',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a4?>]
}, {
type: 'column',
name: 'Status 3',
color: '#589BC4',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a3?>]
}, {
type: 'column',
name: 'Status 2',
color: '#4184AD',
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a2?>]
}, {
type: 'column',
name: 'At the Desk',
color: '#2B6E97', //rgb(43, 110, 151)
borderWidth: 0,
shadow: true,
data: [<?php echo $data7a?>]
}],
drilldown: {
drillUpButton: {
//relativeTo: 'spacingBox',
position: {
y: 10,
x: -10
},
theme: {
fill: 'white',
stroke: 'silver',
r: 2,
states: {
hover: {
fill: '#41739D',
style: {
color: 'white'
}
}
}
}
},
series: [{
type: 'column',
id: 'D2',
data: [['8', 13.77],['8', 2.74],['8', 1.27],['8', 2.64],['8', 2.28],['9', 29.30],['9', 6.44],['9', 3.79],['9', 5.11],['9', 5.32],['10', 36.41],['10', 9.01],['10', 5.47],['10', 7.11],['10', 7.06],['11', 34.12],['11', 7.50],['11', 4.48],['11', 10.02],['11', 8.28],['12', 26.82],['12', 5.03],['12', 5.79],['12', 15.00],['12', 10.27],['13', 30.08],['13', 5.40],['13', 5.34],['13', 11.73],['13', 9.57],['14', 33.90],['14', 7.75],['14', 4.78],['14', 6.41],['14', 9.33],['15', 33.27],['15', 7.73],['15', 4.95],['15', 8.11],['15', 7.09],['16', 31.29],['16', 8.53],['16', 4.51],['16', 6.44],['16', 5.81],['17', 17.36],['17', 3.87],['17', 2.06],['17', 4.47],['17', 3.42],['18', 4.79],['18', .38],['18', .79],['18', 1.44],['18', 2.45]]
}, {
type: 'area',
id: 'D3',
data: [<?php echo $data7b2?>]
}, {
type: 'area',
id: 'D4',
data: [<?php echo $data7b3?>]
}, {
type: 'area',
id: 'D5',
data: [<?php echo $data7b4?>]
}, {
type: 'area',
id: 'D6',
data: [<?php echo $data7b5?>]
}]
}
});
});
我已经展示了第一个向下钻取数据，因此您可以看到结构。任何帮助将不胜感激。
谢谢 罗布
您可以将向下钻取数据的类型从 ['time', data] 更改为 [time, data]：
data: [
['8', 13.77],
['8', 2.74],
['8', 1.27],
['8', 2.64],
['8', 2.28],
['9', 29.30],
['9', 6.44],
['9', 3.79],
['9', 5.11],
['9', 5.32],
...
]
至：
data: [
[8, 13.77],
[8, 2.74],
[8, 1.27],
[8, 2.64],
[8, 2.28],
[9, 29.30],
[9, 6.44],
[9, 3.79],
[9, 5.11],
[9, 5.32],
...
]
而且我还更改了 tooltip.formatter 以显示正确的向下钻取工具提示。这是 DEMO