高库存xAxis类别未对齐

Highstock xAxis categories not aligned

本文关键字：对齐 xAxis 高库存      更新时间：2023-09-26

我正在使用highstock。可以将chart_type更改为spline或line。我面临的问题是x轴类别与数据不一致，这不是一般情况。

这是jsfiddle：http://jsfiddle.net/nishants/sg7ykLpe/1/

$(function () {
    $('#container').highcharts("StockChart", {
        chart: {
            type: 'column',//One can change chart_type to spline or line.
            inverted:0
         },
        title: {
            text: 'Title of the chart',
            style: {
                fontFamily: "lato"
            }
        },
        subtitle: {
            text: '',
            style: {
                fontFamily: "lato"
            }
        },
        yAxis: 
        {
            gridLineWidth: 0,
            title: {
                text: '',  
            },
            labels:{
                enabled:0,
                formatter: function() {
                    return  this.value; ;
                }
            },
            stackLabels:{
                enabled:0
            },
            //min:1,// Avoided generally so in if clause, to handle  specific cases.

        },
        tooltip: {
            enabled: 1,
            formatter: function() {
                return new Date(this.x).toDateString(); ;
            }
        },
        legend:{
            enabled:1
        },
        plotOptions: {
            column: {
                dataLabels: {
                    color: 'white',
                    enabled: 1,
                    style: {
                        //textShadow: '0 0 3px white, 0 0 3px white'
                    },

                    formatter:function(){
                        if (this.y) return this.y;
                    },
                    y:0
                    //color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || '#wihte',

                },
                enableMouseTracking: true
            },
            series: {
                    stacking: 'normal', //null , normal , percent
             }
        },
        series: [{'color': '#009add', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 0], [1408521600000, 3], [1408608000000, 0]], 'name': 'TYPE1'}, {'color': '#f15d22', 'data': [[1385625600000, 0], [1408003200000, 1], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE2'}, {'color': '#7182a6', 'data': [[1385625600000, 1], [1408003200000, 0], [1408348800000, 0], [1408521600000, 0], [1408608000000, 0]], 'name': 'TYPE3'}, {'color': '#62a60a', 'data': [[1385625600000, 0], [1408003200000, 0], [1408348800000, 2], [1408521600000, 1], [1408608000000, 2]], 'name': 'TYPE4'}]
        ,legend: {
            enabled: true,
            align: 'right',
            //backgroundColor: '#FCFFC5',
            //borderColor: 'black',
            //borderWidth: 2,
            layout: 'vertical',
            verticalAlign: 'top',
            y: 100,
            shadow: true
        },

    });
});

使用tickPositions，然后通过格式化程序转换标签值

在您的情况下是

xAxis: {
    // in tick position set all x axis values by this tick will come on this position    
    tickPositions: [1385625600000, 1408003200000, 1408348800000, 1408521600000, 1408608000000],
    labels: {
       /** then by formattor function change our tick value in desired result 
         * here we convert date string in date format like dd/mm/yy
        **/
       formatter: function () {
            return new Date(this.value).getDate()+"/"+(new Date(this.value).getMonth()+1)+"/"+new Date(this.value).getYear() ;
        }
    }

请参阅实况演示

相关文章：