Highcharts - 将系列中的某些列分组在一起,同时保持适当的列宽

时间:2018-02-13 21:24:38

标签: highcharts

有没有办法构建条形图的系列数据,以便在正确保持列宽的同时将某些列组合在一起?

How can I convince IE to simply display application/json rather than offer to download it?

public IHttpActionResult Get([FromUri] ImmediateInformation ii)
{
    return this.Ok(ii);
}

在我的示例中,我希望将市场价值和基准市场价值的列分组为适当的列宽(动态生成而不改变pointWidth),而另一列的名义市场价值则在右侧,宽度为相当于左侧的分组列。

这里,因为有3个系列,所以左侧有#1列和1列。 #2填充,#3为空值,右侧为#1& #2为空,#3为空。

1 个答案:

答案 0 :(得分:0)

Highcharts目前不支持这种外观。

负责定位列的属性为grouping

解决方法:

如果禁用它,则会覆盖具有相同x值的所有列。允许手动更改点位置的属性为pointPlacement。不幸的是,它只能用于系列对象(不是单点),因此我们需要为每个点创建一个单独的系列。

示例:

数据:

series: [{
    data: [[0, 3], [1, 5]],
    name: 'Series 1',
    color: 'red'
}, {
    data: [[0, 3], [2, 7]],
    name: 'Series 2',
    color: 'blue'
}]

应更改为:

series: [{
    data: [[0, 3]],
    name: 'Series 1',
    color: 'red'
}, {
    data: [[1, 5]],
    linkedTo: ':previous',
    color: 'red'
}, {
    data: [[0, 3]],
    name: 'Series 2',
    color: 'blue'
}, {
    data: [[2, 7]],
    linkedTo: ':previous',
    color: 'blue'
}]

linkedTo: ':previous'会导致额外的不必要系列不会出现在图例中。

准备好数据后,我们需要为每个系列应用pointPlacementpointPadding的适当值。为了计算它们,我们需要迭代所有点并检查有多少点具有相同的x值。

pointPlacementpointPadding值的示例:

series: [{
    data: [[0, 3]],
    name: 'Series 1',
    color: 'red',
    pointPlacement: -0.3, // there're two values where x === 0 and this is the first of them - move it to the left
    pointPadding: 0.3 // increase the padding - column is thinner
}, {
    data: [[1, 5]],
    linkedTo: ':previous',
    color: 'red',
    pointPlacement: 0, // there's only one point where x === 1 - center it
    pointPadding: 0.1 // take almost the whole space available for it
}, {
    data: [[0, 3]],
    name: 'Series 2',
    color: 'blue',
    pointPlacement: 0.3, // there're two values where x === 0 and this is the second of them - move it to the right
    pointPadding: 0.3 // increase the padding - column is thinner
}]

一旦你弄清楚pointPlacementpointPadding如何运作,你就能找到计算它们的通用公式。

API参考: