Highcharts - 列宽无响应

时间:2017-09-11 07:58:35

标签: highcharts

我在其中一个项目中使用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

1 个答案:

答案 0 :(得分:1)

我发现使用column图表和datetime轴时,您需要指定pointRange

由于您的数据似乎是每日数据,因此您可以添加一天的点数范围(根据需要进行调整):

pointRange: 86400000

这将使每列在x轴上占用一天的空间。

小提琴:

参考: