Highcharts：链接系列的列位置不正确？ [英] Highcharts: incorrect column placement with linked series?

问题描述

我试图设置具有可变列宽度的柱状图。在一个系列中有不同的列宽似乎不可能，所以我为每个需要的宽度设置了多个系列，并将它们链接起来。

但我遇到了一个问题，如下所示：

http://jsfiddle.net/drmrbrewer/215tnLna/15/

我已经建立了数据，以便不存在任何空白......然而在上述jsfiddle中存在空白。将鼠标悬停在每列上以查看该列的时间...列的右侧边缘应当放置在x轴上（因为pointPlacement设置为-0.5）。

但是唯一正确对齐的列系列，在指定时间右边对齐，是最后一个系列（6小时跨度）。前两个向左移动。

我做错了什么？为什么会发生这种情况，我该如何设置，以便链接系列中的所有列都显示在正确的位置？

谢谢。

jsfiddle代码：

  $（function（）{
 $（'＃b $ b $ （
 $ b title：{
 text：'可变宽度列'
}，
 xAxis：{
 type：'datetime '，
 tickInterval：36e5，
标签：{
格式：'{value：％H}'
} 
}，
图例：{
启用：false 
}，
 plotOptions：{
列：{
 groupPadding：0，
 pointPadding：0，
 borderWidth：0， 
分组：假，
 pointPlacement：-0.5 
} 
}，
系列：[{
 name：'1hr span'，
键入：'column'，
 data：[{x：1428048000000，y：8.4}，{x：1428051600000，y：9}，{ x：1428055200000，y：8.1}，{x：1428058800000，y：6.6}，{x：1428062400000，y：5}]，
颜色：'＃22CC00 '，
 pointRange：36e5 
}，{
 name：'3hr span'，
 type：'column'，
 data：[{x：1428073200000 ， Y：4.9}，{ ×：14280.84亿， Y：4}，{ ×：1428094800000， Y：3.4}，{ ×：1428105600000， Y：2.4}] ，
 color：'＃22CC00'，
 linkedTo：'：previous'，
 pointRange：3 * 36e5 
}，{
 name：'6hr span'， 
类型：'列'，
数据：[{x：1428127200000，y：6.9}]，
颜色：'＃22CC00'，
 linkedTo：' ：之前的'，
 pointRange：6 * 36e5 
}] 
}）; 
}）; 
  

解决方案

我认为您需要设置 pointPlacement 根据你想要达到的范围值，在你的情况下： http：// jsfiddle.net/215tnLna/21/

因此，如果最高跨度将有 pointPlacement：x ，那么 pointRange 值较小的系列也应该减少 pointPlacement 。在你的情况下：

 系列：[{
 name：'1hr span'，
 type：'列'，
 data：[{
x：1428048000000，
y：8.4 
}，{
x：1428051600000，
y：9 
}，{
x：1428055200000，
y：8.1 
}，{
x：1428058800000，
y：6.6 
}，{
x：1428062400000，
y：5 
}]，
颜色：'＃22CC00 '，
 pointPlacement：-0.5 / 6，
 pointRange：36e5 
}，{
 name：'3hr span'，
 type：'column'，
 data：[{
x：1428073200000，
y：4.9 
}，{
x：1428084000000，
y： 4 
}，{
x：1428094800000，
y：3.4 
}，{
 x：1428105600000，
y：2.4 
}]，
颜色：'＃22CC00'，
 linkedTo：'：previous'，
 pointRange： 3 * 36e5，
 pointPlacement：-0.5 / 2 
}，{
 name：'6hr span'，
 type：'column'，
 data：[{ 
x：1428127200000，
y：6.9 
}]，
颜色：'＃22CC00'，
 linkedTo：'：previous'，
 pointRange：6 * 36e5，
 pointPlacement：-0.5 
}] 
  

I'm trying to set up column chart with variable column widths. Having different column widths in a single series doesn't seem to be possible, so I've set up multiple series for each required width, and linked them.

But I've run into a problem, illustrated in the following:

http://jsfiddle.net/drmrbrewer/215tnLna/15/

I've set up the data so that there shouldn't be any gaps... and yet there are gaps in the above jsfiddle. Hover over each column to see the time for that column... the right-hand edge of the column should be placed at that time on the x axis (since pointPlacement is set to -0.5).

BUT the only column series that is aligned correctly, with right-hand edge at the indicated time, is the final one (with a 6 hour span). The first two are shifted left.

What am I doing wrong? Why is this happening, and how do I set this up so that all columns in the linked series are displayed at the correct position?

Thanks.

jsfiddle code:

$(function () {
$('#container').highcharts({

    title: {
        text: 'Variable width columns'
    },
    xAxis: {
        type: 'datetime',
        tickInterval: 36e5,
        labels: {
            format: '{value:%H}'
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        column: {
            groupPadding: 0,
            pointPadding: 0,
            borderWidth: 0,
            grouping: false,
            pointPlacement: -0.5
        }
    },
    series: [{
        name: '1hr span',
        type: 'column',
        data: [{"x":1428048000000,"y":8.4},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5}],
        color: '#22CC00',
        pointRange: 36e5
    },{
        name: '3hr span',
        type: 'column',
        data: [{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4}],
        color: '#22CC00',
        linkedTo: ':previous',
        pointRange: 3 * 36e5
    },{
        name: '6hr span',
        type: 'column',
        data: [{"x":1428127200000,"y":6.9}],
        color: '#22CC00',
        linkedTo: ':previous',
        pointRange: 6 * 36e5
    }]
});
});

解决方案

I think you need to set pointPlacement value according to span you want to achieve, in your case: http://jsfiddle.net/215tnLna/21/

So if highest span will have pointPlacement: x, then series with lower value for the pointRange should have decreased pointPlacement too. In your case:

    series: [{
        name: '1hr span',
        type: 'column',
        data: [{
            "x": 1428048000000,
            "y": 8.4
        }, {
            "x": 1428051600000,
            "y": 9
        }, {
            "x": 1428055200000,
            "y": 8.1
        }, {
            "x": 1428058800000,
            "y": 6.6
        }, {
            "x": 1428062400000,
            "y": 5
        }],
        color: '#22CC00',
        pointPlacement: -0.5 / 6,
        pointRange: 36e5
    }, {
        name: '3hr span',
        type: 'column',
        data: [{
            "x": 1428073200000,
            "y": 4.9
        }, {
            "x": 1428084000000,
            "y": 4
        }, {
            "x": 1428094800000,
            "y": 3.4
        }, {
            "x": 1428105600000,
            "y": 2.4
        }],
        color: '#22CC00',
        linkedTo: ':previous',
        pointRange: 3 * 36e5,
        pointPlacement: -0.5 / 2
    }, {
        name: '6hr span',
        type: 'column',
        data: [{
            "x": 1428127200000,
            "y": 6.9
        }],
        color: '#22CC00',
        linkedTo: ':previous',
        pointRange: 6 * 36e5,
        pointPlacement: -0.5
    }]

这篇关于Highcharts：链接系列的列位置不正确？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！