antvis/G2

如何设定层叠柱状图的时间间隔区间 #3902

kyriejoshua posted onGitHub

  • I have searched the issues of this repository and believe that this is not a duplicate.

https://bizcharts.alibaba-inc.com/gist/3n0kqLj67pd

Steps to reproduce

这个案例是在 bizcharts 上,但是查看 api 发现,本质其实是调用的 G2 的,scale 的 api 设置基本是一样的,猜测可能是打开方式不对导致。所以希望能在这里得到解答。谢谢!

背景

  • 期望实现一个层叠柱状图,内容是时间轴。目前可以实现单个柱状图的时间轴效果,但是想要设置成层叠柱状图的效果不佳。

复现步骤

如下设置时,期望降雨量的时间间隔是秒级的,而不是现在间隔几十年的效果。目前的效果下柱状图高度不能真实反映出数据的大小。 切换下面注释的配置时,也无法生效。

const data =  [
  {name: "London", 月份: "Jan.", 月均降雨量: [1651807711112, 1651807713112],  },
  {name: "London", 月份: "Feb.", 月均降雨量: [1651807703112,1651807713112] },
  {name: "Berlin", 月份: "Jan.", 月均降雨量: [1651807713112, 1651807714312],  },
  {name: "Berlin", 月份: "Feb.", 月均降雨量: [1651807713112, 1651807723112]  },
];
const scale = {
'月均降雨量': {
    type: 'time',
    mask: 'YYYY-MM-DD HH:mm:ss:SSS',
    min:  1651807700000,
    // min: '2022-05-06 11:00:00:111',
    nice: false,
    // values: [1651807703112, 1651817703112],
    // tickCount: 3,
    minTickInterval: 60000,
    // tickInterval: 60000 // 这么设置的话页面会崩溃卡死
}
}

这里的图片显示出,刻度区间无法正确展示差距。 bizcharts

期望的效果类似 时间条形图,但是是叠加的,例如等待时间和执行时间叠加在一起,使用不同颜色区分柱形颜色。

Environment Info
g2 3.5.x
System macOS 12
Browser chrome 100

<!-- generated by antv-issue-helper. DO NOT REMOVE -->


因为时间的范围就是很长,接近 80 年,如果设置 tickInterval: 60000 的话,会导致生成出来的 y 轴 label 标签很多,然后浏览器卡死,如果你的问题是卡死的问题话,解法只能是通过增大 tickInterval 来减少 label 的数量。

posted by hustcc almost 3 years ago

Fund this Issue

$0.00
Funded

Pull requests