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


        });

    });

＆＃34;参数1＆＃34;有1个日期时间值：4月23日。＆＃34;参数2＆＃34;有2个日期时间值：4月22日和4月30日。

但是如果你在JSFiddle结果中看到，Axis 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/

在Highchart中排序X轴时出错

1 个答案: