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->类别&& yAxis->类别&&系列->数据）采用一种格式，但显示得很奇怪。我想念什么？谷歌什么也没说。我也尝试更改地块大小，但没有任何影响。我想我缺少一些基本知识。

为什么在Y轴上呈现了这样一种奇怪的时间格式（我的xAxis对象配置中没有包含某些范围）；
为什么不将零表示为系列的标签（引用系列数据属性）；
为什么呈现[0,9,60]数据，却不呈现[0,8,90]（与第二个问题相同的奇怪行为）；

因此，这些问题都显示在上方的屏幕上。

Answer 1

您在first（0）列的第8（9）单元格中有[0,8,90]，而first（0）列的第9（10）单元格中有[0,9,60]。有什么问题吗？

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

1 个答案: