Highcharts xrange bar height 0 for large datasets
Hicharts xrange bar height 0 for larger data sets
我有一个 xrange 图表,其中每个 'Agent' 都有一系列时间轴数据,我在获取开箱即用的属性以适当地格式化图表数据时遇到了几个问题。例如,当有许多 Series / Y 类别时,任何给定点元素上的条形高度为 0;或者当几乎没有足够的实际高度时,它们不在类别中居中
的高度为 0,这可以通过使用 pointWidth 属性来解决,但我的目标是使用 pointPadding 和 groupPadding 属性使类别/代理部分中的栏和标签居中 - 有人会认为这会这是一项简单的任务,fiddle https://jsfiddle.net/yd7ujvfs/ 显示了一个理想的结束,如果可能的话可能有一个 minWidth
为了在 jsfiddle 中复制我的问题,我将我的图表定义字符串化并将其加载到 jsfiddle 这里 https://jsfiddle.net/0yeu4bg6/4/ 显示高度 0 问题
此外,我想处理几个代理案例,并更完美地使栏在类别中居中,如此 js 所示fiddle https://jsfiddle.net/5kowvgz3/5/
提前感谢您的帮助!
例子:
我尝试摆弄 pointPadding、groupPadding 解决方案与 pointWidth 解决方案,此外我还尝试 fiddle 标签放置并将其与栏对齐,而不是相反。此外,我已经尝试过 pointPlacement,但没有任何乐趣
plotOptions: {
series: {
minPointLength: 10,
borderRadius: 0,
pointPadding: 0,
groupPadding: .25
}
},
{
name: "Adam NonSDX x",
id: 1003043,
data: [
{
y: 0,
agentDisplayName: "Adam NonSDX x",
tooltipDisplay: "Mon, Apr 1 1:14 PM - 2:59 PM",
name: "Available",
x: 1554142440000,
x2: 1554148752857,
color: "#97e34c"
},
...
pointPlacement: "on",
dataLabels: {
enabled: false
}
}
预期结果,每个类别中的轴标签和条形图完美居中,理想情况下每个类别的设置 px,例如 35 px,其中顶部和底部有 10px 的填充,标签和条形图位于中间 25px
实际结果,标签完全居中,但条形图放置不一致,此外,在较大的数据集中,条形图不可见,因为高度设置为 0
Highcharts 为每个类别的每个系列保留 space。为防止禁用 grouping
选项:
plotOptions: {
series: {
grouping: false,
...
}
},
现场演示:https://jsfiddle.net/BlackLabel/xpztou4g/
API参考:https://api.highcharts.com/highcharts/plotOptions.xrange.grouping
我有一个 xrange 图表,其中每个 'Agent' 都有一系列时间轴数据,我在获取开箱即用的属性以适当地格式化图表数据时遇到了几个问题。例如,当有许多 Series / Y 类别时,任何给定点元素上的条形高度为 0;或者当几乎没有足够的实际高度时,它们不在类别中居中
的高度为 0,这可以通过使用 pointWidth 属性来解决,但我的目标是使用 pointPadding 和 groupPadding 属性使类别/代理部分中的栏和标签居中 - 有人会认为这会这是一项简单的任务,fiddle https://jsfiddle.net/yd7ujvfs/ 显示了一个理想的结束,如果可能的话可能有一个 minWidth
为了在 jsfiddle 中复制我的问题,我将我的图表定义字符串化并将其加载到 jsfiddle 这里 https://jsfiddle.net/0yeu4bg6/4/ 显示高度 0 问题
此外,我想处理几个代理案例,并更完美地使栏在类别中居中,如此 js 所示fiddle https://jsfiddle.net/5kowvgz3/5/
提前感谢您的帮助!
例子:
plotOptions: {
series: {
minPointLength: 10,
borderRadius: 0,
pointPadding: 0,
groupPadding: .25
}
},
{
name: "Adam NonSDX x",
id: 1003043,
data: [
{
y: 0,
agentDisplayName: "Adam NonSDX x",
tooltipDisplay: "Mon, Apr 1 1:14 PM - 2:59 PM",
name: "Available",
x: 1554142440000,
x2: 1554148752857,
color: "#97e34c"
},
...
pointPlacement: "on",
dataLabels: {
enabled: false
}
}
预期结果,每个类别中的轴标签和条形图完美居中,理想情况下每个类别的设置 px,例如 35 px,其中顶部和底部有 10px 的填充,标签和条形图位于中间 25px
实际结果,标签完全居中,但条形图放置不一致,此外,在较大的数据集中,条形图不可见,因为高度设置为 0
Highcharts 为每个类别的每个系列保留 space。为防止禁用 grouping
选项:
plotOptions: {
series: {
grouping: false,
...
}
},
现场演示:https://jsfiddle.net/BlackLabel/xpztou4g/
API参考:https://api.highcharts.com/highcharts/plotOptions.xrange.grouping