javascript - Laravel 新 mysql json 选择语法的奇怪行为

Question

所以，我正在使用 HighCharts 热图。

这是我作为样板的演示:https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/heatmap/

这是我的代码:https://jsfiddle.net/g3Lu51va/1/

Highcharts.chart('container', {
            chart: {
                type: 'heatmap',
                marginTop: 40,
                marginBottom: 80,
                plotBorderWidth: 1
            },

            title: {
                text: 'Sales per employee per weekday'
            },

            xAxis: {
                categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            },

            yAxis: {
                type: 'datetime',
                categories: [
                    '00:00 - 01:00',
                    '01:00 - 02:00',
                    '02:00 - 03:00',
                    '03:00 - 04:00',
                    '04:00 - 05:00',
                    '05:00 - 06:00',
                    '06:00 - 07:00',
                    '07:00 - 08:00',
                    '08:00 - 09:00',
                    '09:00 - 10:00',
                    '10:00 - 11:00',
                    '11:00 - 12:00',
                    '12:00 - 1z:00',
                    '13:00 - 14:00',
                    '14:00 - 15:00',
                    '15:00 - 16:00',
                    '16:00 - 17:00',
                    '17:00 - 18:00',
                    '18:00 - 19:00',
                    '19:00 - 20:00',
                    '20:00 - 21:00',
                    '21:00 - 22:00',
                    '22:00 - 23:00',
                    '23:00 - 00:00',
                ],
                title: null
            },

            colorAxis: {
                min: 0,
                minColor: '#FFFFFF',
                maxColor: Highcharts.getOptions().colors[0]
            },

            legend: {
                align: 'right',
                layout: 'vertical',
                margin: 0,
                verticalAlign: 'top',
                y: 25,
                symbolHeight: 280
            },

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> spent <br><b>' +
                        this.point.value + '</b> hours on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
                }
            },

            credits: false,

            series: [{
                name: 'Sales per employee',
                borderWidth: 1,

                borderColor: '#c05e7d', // not works
                color: '#4eb798', // not works

                data: [[0,0,0],[1,0,0],[2,0,0],[3,0,0],[4,0,0],[5,0,0],[6,0,0],[0,1,0],[1,1,0],[2,1,0],[3,1,0],[4,1,0],[5,1,0],[6,1,0],[0,2,0],[1,2,0],[2,2,0],[3,2,0],[4,2,0],[5,2,0],[6,2,0],[0,3,0],[1,3,0],[2,3,0],[3,3,0],[4,3,0],[5,3,0],[6,3,0],[0,4,0],[1,4,0],[2,4,0],[3,4,0],[4,4,0],[5,4,0],[6,4,0],[0,5,0],[1,5,0],[2,5,0],[3,5,0],[4,5,0],[5,5,0],[6,5,0],[0,6,0],[1,6,0],[2,6,0],[3,6,0],[4,6,0],[5,6,0],[6,6,0],[0,7,0],[1,7,0],[2,7,0],[3,7,0],[4,7,0],[5,7,0],[6,7,0],[0,8,90],[1,8,0],[2,8,0],[3,8,0],[4,8,0],[5,8,0],[6,8,0],[0,9,60],[1,9,0],[2,9,0],[3,9,0],[4,9,0],[5,9,0],[6,9,0],[0,10,0],[1,10,0],[2,10,0],[3,10,0],[4,10,0],[5,10,0],[6,10,0],[0,11,0],[1,11,0],[2,11,0],[3,11,0],[4,11,0],[5,11,0],[6,11,0],[0,12,0],[1,12,0],[2,12,0],[3,12,0],[4,12,0],[5,12,0],[6,12,0],[0,13,0],[1,13,0],[2,13,0],[3,13,0],[4,13,0],[5,13,0],[6,13,0],[0,14,0],[1,14,0],[2,14,0],[3,14,0],[4,14,0],[5,14,0],[6,14,0],[0,15,0],[1,15,0],[2,15,0],[3,15,0],[4,15,0],[5,15,0],[6,15,0],[0,16,0],[1,16,0],[2,16,0],[3,16,0],[4,16,0],[5,16,0],[6,16,0],[0,17,0],[1,17,0],[2,17,0],[3,17,0],[4,17,0],[5,17,0],[6,17,0],[0,18,0],[1,18,0],[2,18,0],[3,18,0],[4,18,0],[5,18,0],[6,18,0],[0,19,0],[1,19,0],[2,19,0],[3,19,0],[4,19,0],[5,19,0],[6,19,0],[0,20,0],[1,20,0],[2,20,0],[3,20,0],[4,20,0],[5,20,0],[6,20,0],[0,21,0],[1,21,0],[2,21,0],[3,21,0],[4,21,0],[5,21,0],[6,21,0],[0,22,0],[1,22,0],[2,22,0],[3,22,0],[4,22,0],[5,22,0],[6,22,0],[0,23,0],[1,23,0],[2,23,0],[3,23,0],[4,23,0],[5,23,0],[6,23,0]],
                dataLabels: {
                    enabled: true,
                    color: '#000000'
                }
            }]

        });

在这里，我用我的评论和问题标记了显示奇怪的元素:

因此，正如您所看到的，我的数据(xAxis->categories && yAxis->categories && series->data)采用一种格式，但显示得非常奇怪。我缺少什么？谷歌什么也没说。我还尝试更改绘图大小，但没有任何效果。我认为我错过了一些基本的东西。

1. 为什么在 Y 轴上呈现如此奇怪的时间格式(没有我的 xAxis 对象配置中包含的某些范围)；
2. 为什么不将零渲染为系列标签(引用系列数据属性)；
3. 为什么渲染 [0,9,60] 数据，但不渲染 [0,8,90](与第二个问题中的奇怪行为相同)；

所以，这些问题都显示在上面的屏幕上。

Answer 1

您有 [0,8,90] 代表第一个 (0) 列中的第 8(9) 个单元格，[0,9,60] 代表第一个 (0) 列中的第 8(9) 个单元格第一 (0) 列的第 9 (10) 个单元格。请问什么问题？