如何使 yAxis 从特定时间开始在高图中使用条形系列？答案

【问题标题】：How to make yAxis start from a specific time with bar series in highchart?如何使 yAxis 从特定时间开始在高图中使用条形系列？
【发布时间】：2015-06-30 22:25:38
【问题描述】：

我想让条形图从特定时间（1.Apr）开始

所以我在下面的示例中实现了这个：

(jsFiddle) sample with axis right but can the bar disappear

下面的代码

    yAxis: {
        type: 'datetime',
        min:Date.UTC(2010, 3, 1)
    },

yAxis 实际上从 1.Apr 开始，但我看不到条本身。

如果我将最小行注释如下

    yAxis: {
        type: 'datetime'
        //min:Date.UTC(2010, 3, 1)
    },

现在我可以看到栏出现了，但 yAxis 默认显示从 1.Jan 开始。

谁能帮我从 1.Apr 开始让栏和 yAxis 可见？

【问题讨论】：

标记为：“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及重现它所需的最短代码在问题本身中。”
为什么在 y 轴上？你从哪里得到“pointStart”？而且您的积分实际上没有日期时间 x 值。
如果你使用pointStart，你不应该在point对象中使用x参数。

标签： javascript datetime highcharts axis stackedbarseries

【解决方案1】：

我想我找到了您要搜索的内容。

yAxis 中有一个名为min 的选项，用于设置坐标轴的最小值。像这样：

yAxis: {
    type: 'datetime',                      
    min: Date.UTC(2010, 3, 1)
}

希望这是您正在搜索的内容。熊的礼物。

【讨论】：

感谢您的帮助，也许我应该更清楚地说明我的问题。所以我在这里做了一个示例，jsfiddle.net/bbkingtw/v9582phy/2 从我的示例中，您将看到 1.Jan 的 yAxis 显示，但我想要的是 Arp 显示的。 1.如果我在jsfiddle.net/bbkingtw/v9582phy/3 中添加 min:Date.UTC(2010,3,1) ，则条形消失...这让我感到困惑

【解决方案2】：

让我解释一下日期时间轴的工作原理。通常，日期时间轴基于自1970-01-01 00:00:00 以来的毫秒数。这意味着，设置 y: 3600 * 1000 会将列从 1970-01-01 00:00:00 渲染到 1970-01-01 01:00:00。您想从 4 月 1 日开始图表，但您的数据并未反映这一点。也就是说，你需要提供这样的信息，例如：

    series: [{
        name: 'UP',
        color: 'lime',
        data: [{
            x: 1,
            y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
            // or:
            // y: 1433120400000 
            // is the same as above use for Date.UTC()
        }]
    }]

现场演示：http://jsfiddle.net/v9582phy/4/

【讨论】：

【解决方案3】：

感谢您的回复，对您有帮助。我已经扩展了你的代码，进一步增强如下

yAxis: {
        type: 'datetime',            
        labels: {
            formatter: function () {
                 var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)                     
                 return moment(x).format('MMM/DD HH:mm:ss')
            }
        }
    },

以系列数据为

   series: [{            
        data: [{
            status:'studying',
            color: 'lime',
            x: 1,
            y: 5
        }, {
            status:'playing guitar',
            color: 'yellow',
            x: 2,
            y: 10
        }, {
            status:'exam',
            color: 'red',
            x: 2,
            y: 23
        }]
    }]

我得到了堆积条，每个条显示持续状态的分钟数

现场演示：http://jsfiddle.net/v9582phy/11/

【讨论】：