Question

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

我需要的是图表将显示为堆叠列。我错过了什么？我试着堆积：＆＃39;正常＆＃39;在plotOptions上，但仍然没有工作。

请指教，谢谢

我的高帮图选项：

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设置为null，您也可以为列获得相同的结果（不叠加）：http://jsfiddle.net/BlackLabel/n1s4sqps/

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

行：http://jsfiddle.net/BlackLabel/n1s4sqps/1/
专栏：http://jsfiddle.net/BlackLabel/n1s4sqps/2/

如果你能解释一下你的意见应该如何呈现，请告诉我，也许我们可以找到一些解决方案。这种堆叠的图像会很棒。

highcharts datetime数据不适用于列类型，但在线工作

1 个答案: