0

我正在使用 Highcharts 处理柱形图。图表需要处理任意数量的列。

这是我需要处理的一个此类图表的示例：

$('#TimesChart2').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Response Times'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            }
        },
        yAxis: {
            title: {
                text: 'Minutes'
            }
        },
        series: [{
            name: 'Average Response Time',
            data: [[Date.UTC(2013, 6, 30), 878.42], [Date.UTC(2013, 6, 31), 579.68], [Date.UTC(2013, 7, 1), 400.42], [Date.UTC(2013, 7, 2), 622.95], [Date.UTC(2013, 7, 5), 1260.97], [Date.UTC(2013, 7, 3), 0], [Date.UTC(2013, 7, 4), 0], [Date.UTC(2013, 7, 6), 517.945] ],
            dataGrouping: {
                enabled: false
            },
            pointPadding: .05
         }],
    });

问题是这组数据的列宽度非常小。在某些数据集中（请参阅 jsfiddle 链接中的第一张图），列具有正常宽度并且很好。

一种可能的解决方法是将 pointWidth 设置为固定值，但随后在大图上列重叠。我也尝试过使用 pointPadding 和分组，但无济于事。

http://jsfiddle.net/3NZZW/

有人知道这里发生了什么吗？

4

1 回答 1

1

这真的很奇怪。但是，您的第一个数据系列是以相反的日期顺序排列的。如果你解决了这个问题，图表是正确的。

http://jsfiddle.net/pUTQd/

        series: [{
            name: 'Average Response Time',
            data: [[Date.UTC(2013, 7, 2), 354.5], [Date.UTC(2013, 7, 3), 1981.875], [Date.UTC(2013, 7, 4), 434.5], [Date.UTC(2013, 7, 5), 678.1], [Date.UTC(2013, 7, 6), 87.465] ],
            dataGrouping: {
                enabled: false
            },
            pointPadding: .05
         }],

（注意我只是更改了日期，我没有更改数据）

于 2013-08-07T23:39:13.310 回答