Question

我在https://jsfiddle.net/kg3b2xyL/的Highcharts中创建了一个堆积面积图，我将小时分为24个类别（我想可以用X轴间隔来填充时间戳，但是我认为这两种方法都应该起作用吗？）。每个系列有24个条目。 Highcharts可以将数据绘制成图表，并显示我给它的所有类别，但是出于某种原因，它在图表的右侧末尾添加了其他类别，因此即使我的类别从中间开始，数字仍扩展到24的日期，类别列表中的最终类别是18。这是Highcharts中的错误吗？我是否必须切换到进纸时间戳，还是按照我的编码方式进行工作？

谢谢！

这是我的HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

还有我的JavaScript：

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    legend: {
        enabled: false
    },
    title: {
        text: 'Calls to technical support last 24 hours'
    },
    xAxis: {
        title: {
            text: 'Time of Day'
        },
        categories: ['19', '20', '21', '22', '23', '24', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']
    },
    yAxis: {
        title: {
            text: 'Calls during the hour'
        },
    },
    tooltip: {
        split: true,
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            lineColor: '#666666',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#666666'
            }
        }
    },
    series: [

        { name: 'Jane', data: [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'John', data: [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Julie', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Walter', data: [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Andy', data: [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Julio', data: [2, 0, 0, 2, 0, 0, 2, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Rachel', data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Steven', data: [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },
        { name: 'Phil', data: [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] },

    ]
});

Answer 1

可以通过从Julio和Reachel数据中删除零来解决该问题-零太多。

演示：

https://jsfiddle.net/BlackLabel/h50m9y72/

为什么Highcharts x轴不尊重堆积面积图中的类别

1 个答案: