如何使yAxis从一个特定的时间开始,条形图中的序列



我想让条形图从特定时间(4月1日)开始

所以我在下面的示例中实现了这一点:

(jsFiddle)轴右侧的样本,但条是否会消失

代码低于

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

yAxis实际上从4月1日开始,但我看不到酒吧本身。

如果我将最小值标注为以下

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

现在我可以看到栏出现了,但yAxis默认显示从1月1日开始。

有人能帮我从4月1日开始显示栏和yAxis吗?

我想我找到了你正在搜索的内容。

yAxis中有一个名为min的选项,用于设置轴的最低值。比如:

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

希望这就是你正在寻找的。骗子从熊。

让我解释一下日期时间轴是如何工作的。通常,日期时间轴基于自1970-01-01 00:00:00以来的毫秒数。也就是说,设置y: 3600 * 1000将渲染列从1970-01-0100:00:00到1970-01-0101: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/

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

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/

相关内容

  • 没有找到相关文章

最新更新