使用具有堆叠系列的 highstock 图表
Using a highstock chart with stacked series
我目前有一个 highcharts 堆积柱形图,如下所示:
而且我有太多数据要放入该图表中,以至于它看起来很难看并且不适合宽度:
请注意,我在两个屏幕截图中每列有 4 种颜色
所以我想使用 highstock 图表,用户可以在其中放大和缩小数据,例如:https://www.highcharts.com/stock/demo/column
但是,有没有办法在保持堆叠的同时使用它?
这里是 a fiddle,其中包含我的堆叠图表的一小部分样本数据,这是它的代码:
// Create the chart
Highcharts.chart('container',
{
"chart": {
"type": "column"
},
"title": {
"text": ""
},
"xAxis": {
"categories": [
"Start Term 1",
"Start Term 2",
"29-Sep",
"Start Term 3",
"03-Oct",
"05-Oct",
"Start Term 4",
"12-Oct",
"20-Oct",
"23-Oct",
"30-Oct",
"17-Nov",
"21-Nov"
],
"labels": {
"style": {
"font-size": "12px"
},
"useHTML": true
}
},
"yAxis": {
"title": {
"text": "Time (hh:mm)"
},
"tickInterval": 600,
"labels": {},
"gridLineWidth": 0,
"plotLines": [
{
"value": 0,
"width": 1,
"color": "#000",
"zIndex": 4
}
],
"tickmarkPlacement": "on"
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {}
}
},
"credits": {
"enabled": false
},
"tooltip": {
"shared": true,
"crosshairs": true
},
"legend": {
"align": "right",
"verticalAlign": "top",
"itemStyle": {
"display": "none"
},
"title": {
"text": "Click a colour"
}
},
"series": [
{
"name": "On Task Teacher Recommended",
"data": [
null,
null,
10688,
null,
4624,
4330,
null,
5220,
169,
5220,
4330,
9144,
4345
],
"color": "#86E067",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "On Task Student Discovered",
"data": [
null,
null,
10373,
null,
5384,
5301,
null,
5521,
1002,
5599,
5387,
15535,
5373
],
"color": "#5CB5E5",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Uncategorised",
"data": [
null,
null,
341,
null,
226,
226,
null,
226,
425,
2240,
1281,
3727,
1334
],
"color": "#F98157",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Off Task",
"data": [
null,
null,
-18937,
null,
-7056,
-7034,
null,
-7163,
-1271,
-7208,
-7091,
-21658,
-7050
],
"color": "#E3454D",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}
]
}
);
您可以使用 scrollbars-for-any-axis 在 highstock 等 highcharts 中添加滚动。你必须使用 highstock js 而不是 highcharts js。
您必须使用 max
属性来设置您希望在 x 轴上看到的列数。
// Create the chart
Highcharts.chart('container', {
"chart": {
"type": "column"
},
"title": {
"text": ""
},
"xAxis": {
"categories": [
"Start Term 1",
"Start Term 2",
"29-Sep",
"Start Term 3",
"03-Oct",
"05-Oct",
"Start Term 4",
"12-Oct",
"20-Oct",
"23-Oct",
"30-Oct",
"17-Nov",
"21-Nov"
],
"labels": {
"style": {
"font-size": "12px"
},
"useHTML": true
},
min: 0,
max: 4, //this is value to be changed based on column number
scrollbar: {
enabled: true
},
},
"yAxis": {
"title": {
"text": "Time (hh:mm)"
},
"tickInterval": 600,
"labels": {},
"gridLineWidth": 0,
"plotLines": [{
"value": 0,
"width": 1,
"color": "#000",
"zIndex": 4
}],
"tickmarkPlacement": "on",
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {}
}
},
"credits": {
"enabled": false
},
"tooltip": {
"shared": true,
"crosshairs": true
},
"legend": {
"align": "right",
"verticalAlign": "top",
"itemStyle": {
"display": "none"
},
"title": {
"text": "Click a colour"
}
},
"series": [{
"name": "On Task Teacher Recommended",
"data": [
null,
null,
10688,
null,
4624,
4330,
null,
5220,
169,
5220,
4330,
9144,
4345
],
"color": "#86E067",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}, {
"name": "On Task Student Discovered",
"data": [
null,
null,
10373,
null,
5384,
5301,
null,
5521,
1002,
5599,
5387,
15535,
5373
],
"color": "#5CB5E5",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}, {
"name": "Uncategorised",
"data": [
null,
null,
341,
null,
226,
226,
null,
226,
425,
2240,
1281,
3727,
1334
],
"color": "#F98157",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}, {
"name": "Off Task",
"data": [
null,
null, -18937,
null, -7056, -7034,
null, -7163, -1271, -7208, -7091, -21658, -7050
],
"color": "#E3454D",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}]
});
<!--<script src="https://code.highcharts.com/highcharts.js"></script>-->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle 演示
或
您可以使用 chart.zoomType 缩放图表。
// Create the chart
Highcharts.chart('container',
{
"chart": {
"type": "column",
zoomType:'x' //only x axis zoom
},
"title": {
"text": ""
},
"xAxis": {
"categories": [
"Start Term 1",
"Start Term 2",
"29-Sep",
"Start Term 3",
"03-Oct",
"05-Oct",
"Start Term 4",
"12-Oct",
"20-Oct",
"23-Oct",
"30-Oct",
"17-Nov",
"21-Nov"
],
"labels": {
"style": {
"font-size": "12px"
},
"useHTML": true
}
},
"yAxis": {
"title": {
"text": "Time (hh:mm)"
},
"tickInterval": 600,
"labels": {},
"gridLineWidth": 0,
"plotLines": [
{
"value": 0,
"width": 1,
"color": "#000",
"zIndex": 4
}
],
"tickmarkPlacement": "on"
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {}
}
},
"credits": {
"enabled": false
},
"tooltip": {
"shared": true,
"crosshairs": true
},
"legend": {
"align": "right",
"verticalAlign": "top",
"itemStyle": {
"display": "none"
},
"title": {
"text": "Click a colour"
}
},
"series": [
{
"name": "On Task Teacher Recommended",
"data": [
null,
null,
10688,
null,
4624,
4330,
null,
5220,
169,
5220,
4330,
9144,
4345
],
"color": "#86E067",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "On Task Student Discovered",
"data": [
null,
null,
10373,
null,
5384,
5301,
null,
5521,
1002,
5599,
5387,
15535,
5373
],
"color": "#5CB5E5",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Uncategorised",
"data": [
null,
null,
341,
null,
226,
226,
null,
226,
425,
2240,
1281,
3727,
1334
],
"color": "#F98157",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Off Task",
"data": [
null,
null,
-18937,
null,
-7056,
-7034,
null,
-7163,
-1271,
-7208,
-7091,
-21658,
-7050
],
"color": "#E3454D",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}
]
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle 演示
我目前有一个 highcharts 堆积柱形图,如下所示:
而且我有太多数据要放入该图表中,以至于它看起来很难看并且不适合宽度:
请注意,我在两个屏幕截图中每列有 4 种颜色
所以我想使用 highstock 图表,用户可以在其中放大和缩小数据,例如:https://www.highcharts.com/stock/demo/column
但是,有没有办法在保持堆叠的同时使用它?
这里是 a fiddle,其中包含我的堆叠图表的一小部分样本数据,这是它的代码:
// Create the chart
Highcharts.chart('container',
{
"chart": {
"type": "column"
},
"title": {
"text": ""
},
"xAxis": {
"categories": [
"Start Term 1",
"Start Term 2",
"29-Sep",
"Start Term 3",
"03-Oct",
"05-Oct",
"Start Term 4",
"12-Oct",
"20-Oct",
"23-Oct",
"30-Oct",
"17-Nov",
"21-Nov"
],
"labels": {
"style": {
"font-size": "12px"
},
"useHTML": true
}
},
"yAxis": {
"title": {
"text": "Time (hh:mm)"
},
"tickInterval": 600,
"labels": {},
"gridLineWidth": 0,
"plotLines": [
{
"value": 0,
"width": 1,
"color": "#000",
"zIndex": 4
}
],
"tickmarkPlacement": "on"
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {}
}
},
"credits": {
"enabled": false
},
"tooltip": {
"shared": true,
"crosshairs": true
},
"legend": {
"align": "right",
"verticalAlign": "top",
"itemStyle": {
"display": "none"
},
"title": {
"text": "Click a colour"
}
},
"series": [
{
"name": "On Task Teacher Recommended",
"data": [
null,
null,
10688,
null,
4624,
4330,
null,
5220,
169,
5220,
4330,
9144,
4345
],
"color": "#86E067",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "On Task Student Discovered",
"data": [
null,
null,
10373,
null,
5384,
5301,
null,
5521,
1002,
5599,
5387,
15535,
5373
],
"color": "#5CB5E5",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Uncategorised",
"data": [
null,
null,
341,
null,
226,
226,
null,
226,
425,
2240,
1281,
3727,
1334
],
"color": "#F98157",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Off Task",
"data": [
null,
null,
-18937,
null,
-7056,
-7034,
null,
-7163,
-1271,
-7208,
-7091,
-21658,
-7050
],
"color": "#E3454D",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}
]
}
);
您可以使用 scrollbars-for-any-axis 在 highstock 等 highcharts 中添加滚动。你必须使用 highstock js 而不是 highcharts js。
您必须使用 max
属性来设置您希望在 x 轴上看到的列数。
// Create the chart
Highcharts.chart('container', {
"chart": {
"type": "column"
},
"title": {
"text": ""
},
"xAxis": {
"categories": [
"Start Term 1",
"Start Term 2",
"29-Sep",
"Start Term 3",
"03-Oct",
"05-Oct",
"Start Term 4",
"12-Oct",
"20-Oct",
"23-Oct",
"30-Oct",
"17-Nov",
"21-Nov"
],
"labels": {
"style": {
"font-size": "12px"
},
"useHTML": true
},
min: 0,
max: 4, //this is value to be changed based on column number
scrollbar: {
enabled: true
},
},
"yAxis": {
"title": {
"text": "Time (hh:mm)"
},
"tickInterval": 600,
"labels": {},
"gridLineWidth": 0,
"plotLines": [{
"value": 0,
"width": 1,
"color": "#000",
"zIndex": 4
}],
"tickmarkPlacement": "on",
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {}
}
},
"credits": {
"enabled": false
},
"tooltip": {
"shared": true,
"crosshairs": true
},
"legend": {
"align": "right",
"verticalAlign": "top",
"itemStyle": {
"display": "none"
},
"title": {
"text": "Click a colour"
}
},
"series": [{
"name": "On Task Teacher Recommended",
"data": [
null,
null,
10688,
null,
4624,
4330,
null,
5220,
169,
5220,
4330,
9144,
4345
],
"color": "#86E067",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}, {
"name": "On Task Student Discovered",
"data": [
null,
null,
10373,
null,
5384,
5301,
null,
5521,
1002,
5599,
5387,
15535,
5373
],
"color": "#5CB5E5",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}, {
"name": "Uncategorised",
"data": [
null,
null,
341,
null,
226,
226,
null,
226,
425,
2240,
1281,
3727,
1334
],
"color": "#F98157",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}, {
"name": "Off Task",
"data": [
null,
null, -18937,
null, -7056, -7034,
null, -7163, -1271, -7208, -7091, -21658, -7050
],
"color": "#E3454D",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}]
});
<!--<script src="https://code.highcharts.com/highcharts.js"></script>-->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle 演示
或
您可以使用 chart.zoomType 缩放图表。
// Create the chart
Highcharts.chart('container',
{
"chart": {
"type": "column",
zoomType:'x' //only x axis zoom
},
"title": {
"text": ""
},
"xAxis": {
"categories": [
"Start Term 1",
"Start Term 2",
"29-Sep",
"Start Term 3",
"03-Oct",
"05-Oct",
"Start Term 4",
"12-Oct",
"20-Oct",
"23-Oct",
"30-Oct",
"17-Nov",
"21-Nov"
],
"labels": {
"style": {
"font-size": "12px"
},
"useHTML": true
}
},
"yAxis": {
"title": {
"text": "Time (hh:mm)"
},
"tickInterval": 600,
"labels": {},
"gridLineWidth": 0,
"plotLines": [
{
"value": 0,
"width": 1,
"color": "#000",
"zIndex": 4
}
],
"tickmarkPlacement": "on"
},
"plotOptions": {
"column": {
"stacking": "normal",
"events": {}
}
},
"credits": {
"enabled": false
},
"tooltip": {
"shared": true,
"crosshairs": true
},
"legend": {
"align": "right",
"verticalAlign": "top",
"itemStyle": {
"display": "none"
},
"title": {
"text": "Click a colour"
}
},
"series": [
{
"name": "On Task Teacher Recommended",
"data": [
null,
null,
10688,
null,
4624,
4330,
null,
5220,
169,
5220,
4330,
9144,
4345
],
"color": "#86E067",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "On Task Student Discovered",
"data": [
null,
null,
10373,
null,
5384,
5301,
null,
5521,
1002,
5599,
5387,
15535,
5373
],
"color": "#5CB5E5",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Uncategorised",
"data": [
null,
null,
341,
null,
226,
226,
null,
226,
425,
2240,
1281,
3727,
1334
],
"color": "#F98157",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
},
{
"name": "Off Task",
"data": [
null,
null,
-18937,
null,
-7056,
-7034,
null,
-7163,
-1271,
-7208,
-7091,
-21658,
-7050
],
"color": "#E3454D",
"events": {},
"point": {
"events": false
},
"customEvents": {
"series": {},
"point": {}
}
}
]
}
);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle 演示