javascript - highcharts 日期时间数据不适用于列类型，但适用于行

Question

我想使用带有日期时间数据的 highcharts.js 创建堆积柱形图 它适用于线型，但不适用于列型。结果 100% 持平。

我需要的是图表将显示为堆积柱。我错过了什么？ 我尝试在plotOptions上使用stacked: 'normal'，但仍然不起作用。

请指教，谢谢

我的 Highcharts 选项:

var optionsProcessTime = {
        global: {
                useUTC: false
        },
    title: {
        text: '',
        x: -20 //center
    },
    subtitle: {
        text: '',
        x: -20
    },
    xAxis: {                
            categories: [],
            labels:{
                formatter: function(){
                    return '#'+this.value;
                }
            }
    },
    yAxis: {
        title: {
            text: ''
        },
            type: 'datetime',
            dateTimeLabelFormats: {
                    millisecond: '%H:%M:%S',
                    second: '%H:%M:%S',
                    minute: '%H:%M:%S',
                    hour: '%H:%M:%S'
            },
            labels:{
                format: '{value:%H:%M:%S}'
            },
            gridLineWidth: 0
    },
    tooltip: {
        enabled: true,
            type: 'datetime',
            formatter: function(){
                return Highcharts.dateFormat('%H:%M:%S',new Date(this.y))
            }
    },
    legend: {
        enabled : false
    },
    plotOptions: {
            series: {
        pointPadding: 0.05,
        groupPadding: 0
    },
        column: {
                stacking: 'normal'
        },
            line: {
                marker: {
                    radius: 2,
                    fillColor: '#ad050b'
                },
                dashStyle: 'ShortDash',
                lineWidth: 1,
            }   
    },
    series: []
}

我的 Json 输出:

[{
    "name":"Checker",
    "data":[86,87,91,92,93,94,99,100,101]},
{
    "name":"Estimate",
    "type":"column",
    "data":[1517018400000,1517014800000,1517014800000,1517018400000,1517017200000,1517015700000,1517013900000,1517013900000,1517013900000]},
{
    "name":"Process",
    "type":"column",
    "data":[1517018400000,1517013666000,1517014800000,1517016664000,1517015107000,1517014984000,1517013604000,1517013900000,1517013900000]
}]

Answer 1

我建议禁用 yAxis.labels 的定义(仅用于调试)。您将看到原始标签并了解它是如何工作的:)

简而言之，堆叠将每个值渲染在前一个值之上，例如:1517018400000 + 1517018400000 = 3034036800000 因此它会渲染 2066 年的点。由于所有列都从零 (0) 开始，因此距离相当大:136 年。看看:http://jsfiddle.net/BlackLabel/L4Lgbvvm/45/

为什么它适用于折线图？简而言之，line 类型不像 column 那样从零开始。通过设置 series.threshold，您也可以为列获得相同的结果(不堆叠)为空:http://jsfiddle.net/BlackLabel/n1s4sqps/

堆叠怎么样？我不确定这应该如何工作..它对于列和行的工作方式相同，比较堆叠:

• 行:http://jsfiddle.net/BlackLabel/n1s4sqps/1/
• 列:http://jsfiddle.net/BlackLabel/n1s4sqps/2/

如果您能解释一下您认为应该如何渲染堆叠，请告诉我，也许我们可以找到一些解决方案。如果有这样的堆叠图像就太好了。