我在其中一个项目中使用Highcharts,并且列响应率存在未知问题。由于看起来Highcharts列图在默认情况下是响应式的,因此我始终处于相同的列宽:
new Highcharts.Chart("highcharts-994d8ebb-5c08-4c83-b4d4-265ed2340006", {
"chart": {
"type": "column",
"alignTicks": false
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true
},
"enableMouseTracking": true,
"animation": true
}
},
"title": {
"text": "Istorija Snage"
},
"subtitle": {
"text": "Poslednjih 30 dana"
},
"exporting": {
"enabled": false
},
"yAxis": [{
"title": {
"text": "Snaga"
},
"labels": {
"format": "{value} MW"
}
}],
"xAxis": [{
"labels": {
"format": "{value:%d-%m-%Y}"
},
"type": "datetime",
"title": {
"text": "Datum"
}
}],
"series": [{
"type": 'column',
"data": [
[1505088000000, 0],
[1505001600000, 0],
[1504915200000, 0],
[1504828800000, 0],
[1504742400000, 0],
[1504656000000, 0],
[1504569600000, 149],
[1504483200000, 302],
[1504396800000, 301],
[1504310400000, 301],
[1504224000000, 301],
[1504137600000, 299],
[1504051200000, 283],
[1503964800000, 67],
[1503878400000, 0],
[1503792000000, 0],
[1503705600000, 0],
[1503619200000, 31],
[1503532800000, 100],
[1503446400000, 100],
[1503273600000, 101],
[1503014400000, 94],
[1502928000000, 101],
[1502841600000, 114],
[1502668800000, 187],
[1502409600000, 80],
[1502236800000, 56],
[1502150400000, 46],
[1502064000000, 46],
[1501977600000, 45]
],
"name": "Prosječna snaga (MW)",
"_colorIndex": 0,
"_symbolIndex": 0,
"type": "column",
"color": null,
"negativeColor": "",
"marker": {
"enabled": false
}
}],
"credits": {
"enabled": false
},
"legend": {
"enabled": false,
"layout": "horizontal"
}
});
我对jsfiddle的解决方案是here。
jsfiddle上的响应列宽度示例为here。
答案 0 :(得分:1)
我发现使用column
图表和datetime
轴时,您需要指定pointRange
。
由于您的数据似乎是每日数据,因此您可以添加一天的点数范围(根据需要进行调整):
pointRange: 86400000
这将使每列在x轴上占用一天的空间。
小提琴:
参考: