javascript - Highchart 中 X 轴排序错误

Question

希望有人能帮助我!好吧，我正在使用 Highcharts 制作柱形图。但是，我不知道为什么，有时图表无法以正确的顺序呈现日期值......看:

var dados1 = [
{name: 'Parameter 1', data: [ [Date.UTC(2015,3,23,12,25),0.77],], type: 'column', tooltip: { valueDecimals: 2}},{name: 'Parameter 2', data: [ [Date.UTC(2015,3,22,16,25),0.74],[Date.UTC(2015,3,30,16,25),0.74],], type: 'column', tooltip: { valueDecimals: 2}},];
var val_superior = 2;
var val_inferior = 0.20;
var maior_leitura = 2;
var menor_leitura = 0;
$(function () {
        Highcharts.setOptions({
            credits: {
                enabled: false
            },
            chart: {
                events: {
                    load: function () {
                        var chart = this;
                        var extremes = chart.xAxis[0].getExtremes();
                        chart.xAxis[0].setExtremes(extremes.min - (15 * 60 * 1000), extremes.max + (15 * 60 * 1000));
                    }
                }
            },
            //0000fe
            colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1']            });
        // Create the chart
        $('#container').highcharts( {

            rangeSelector: {

                enabled: false
            },

            navigator: {
                enabled: false
            },
            title: {
                text: ''
            },
            legend: {
                enabled: true,
                align: 'center',
                backgroundColor: '#FCFFC5',
                borderColor: 'black',
                borderWidth: 1,
                layout: 'vertical',
                verticalAlign: 'top',
                y: 0,
                shadow: true
            },
            yAxis: {
                title: {
                    text: 'Valores'
                },
                max: maior_leitura,
                min: menor_leitura,
                showEmpty: true,
                plotLines: [{
                    value: val_superior, //maior_leitura
                    id: 'linhaLimiteSuperior',
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Limite superior'
                    },
                    zIndex: 99
                }, {
                    value: val_inferior, //menor_leitura
                    id: 'linhaLimiteInferior',
                    color: 'red',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Limite inferior'
                    },
                    zIndex: 99
                }]
            },
            xAxis: {
                type: 'datetime'
            },
            series: dados1


        });

    });

“参数 1”有 1 个日期时间值:4 月 23 日。“参数 2”有 2 个日期时间值:4 月 22 日和 4 月 30 日。

但是，如果您在 JSFiddle 结果中看到，轴 X 的顺序不正确...它必须是:参数 2(4 月 22 日)、参数 1(4 月 23 日)和参数 2(4 月 30 日)但它是:参数1(4月23日)、参数2(4月22日)和参数2(4月30日)

http://jsfiddle.net/atilaca/bjxp81x8/4/

谢谢!

Answer 1

这看起来像是发生了两个问题:

1) 列系列的默认分组功能会干扰正确的布局

2) 未设置的 pointRange 也会使布局困惑。

要解决此问题，请将分组设置为 false，并适当设置 pointRange:

plotOptions: {
  column: {
    grouping: false,
    pointRange: 86400 * 1000 //one day
  }
}

示例:

• http://jsfiddle.net/bjxp81x8/5/