javascript - Highchart xAxis 和值未对齐

Question

我有 highchart 系列时间，我尝试配置如下
http://jsfiddle.net/viethien/3eofd1nk/33/

$(function () {
        $('#container').highcharts({
            global: {
                useUTC: false
                },
           chart: {
                zoomType: 'x',
                type:'area',
                plotBackgroundColor: '#fff',
                backgroundColor:'transparent',
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'X Axis and value not match',
                align: 'left',
                margin: 30,
                style:{
                    fontFamily:'VegurRegular',
                    fontSize:'21px'
                }
            },
            subtitle: {
                text:'Date Time',
                align: 'left',
                x: 20,
                style: {
                    color: '#282828',
                    fontFamily:'VegurRegular'
                }
            },
            xAxis: {
                title: {
                    text: ''
                },
                type: 'datetime',
                labels : {
                    formatter: function() {
var myDate = new Date(this.value);
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());   
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);      
                    },
                    style:{
                        fontFamily:'VegurRegular'
                    }
                 }
            },
            yAxis: {
                opposite:true,    
                title: {
                    text: ''
                },
                 
                labels: {
                    formatter: function() {
                        return [this.value];
                    },
                    style:{
                        fontFamily:'VegurRegular'
                    }

                },
            },
            tooltip: {
                shared: true,
                formatter: function() {
var myDate = new Date(this.x);                        
var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());   
return Highcharts.dateFormat('%Y-%m-%d',newDateMs);    
                    
                 },
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: [0, 0, 0, 300],
            stops: [
              [0, '#5cc2d6'],
              [1, Highcharts.color('#5cc2d6').setOpacity(0).get('rgba')]
            ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
    
            series: [{
                type: 'area',
                name: 'USD to EUR',
                data:  [{x: 1628175600000, y: 15.06670830384981064, display: "2021-08-06"},
                      {x: 1628262000000, y: 10.9409600143487062, display: "2021-08-07"},
                      {x: 1628348400000, y: 50.5110465749795092, display: "2021-08-08"},
                      {x: 1628434800000, y: 30.5244073812182639, display: "2021-08-09"},
                      {x: 1628521200000, y: 20.7439211283888343, display: "2021-08-10"},
                      {x: 1628607600000, y: 60.6684340924556529, display: "2021-08-11"},
                      {x: 1628694000000, y: 90.5417027025304146, display: "2021-08-12"}]
            }]
        });
    });
    

我阅读了其他文章并建议 set utc false 但不起作用。
HighChart- When I use useUTC: false then x axis data are not showing properly
你能帮我解决这个问题吗？

Answer 1

您可以使用 tickPositioner函数并在与点相同的位置生成刻度。

  tickPositioner: function() {
    return this.series[0].xData;
  }

现场演示: http://jsfiddle.net/BlackLabel/43bugf76/
API 引用: https://api.highcharts.com/highcharts/xAxis.tickPositioner