Question

我正在使用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/

任何人都知道这里发生了什么？

Answer 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
         }],

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

Highcharts列没有宽度（看似任意）

1 个答案: