Highcharts 行名称重叠

我创建了散点图

这里的行名称彼此重叠？点从行名称的中间开始绘制。为什么我们不能从行名称的开头开始

我能知道怎么解决这个问题吗

这是密码

var InfluenceCnt=0;
var QResiduals=[];
var XLables=[];
var HottelingT2=[];
var EllipseChartData;
var EllipseShift;
QResiduals.push('0.5356899');
QResiduals.push('0.3356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.8356899');
QResiduals.push('0.2356899');
QResiduals.push('0.4356899');
QResiduals.push('0.4356899');
QResiduals.push('0.4356899');
QResiduals.push('0.2356899');
QResiduals.push('0.2356899');
QResiduals.push('0.5356899');
QResiduals.push('0.8356899');
QResiduals.push('0.9356899');
QResiduals.push('0.5356899');
QResiduals.push('0.7356899');
QResiduals.push('0.2356899');
QResiduals.push('0.1356899');
QResiduals.push('0.0356899');
QResiduals.push('0.5356899');
QResiduals.push('0.8356899');
QResiduals.push('0.7356899');

HottelingT2.push('0.1')
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');
HottelingT2.push('0.4')
HottelingT2.push('0.5');
HottelingT2.push('0.3');
HottelingT2.push('0.2');
HottelingT2.push('0.6');
HottelingT2.push('0.7');
HottelingT2.push('0.8')
HottelingT2.push('0.9');
HottelingT2.push('0.2');
HottelingT2.push('0.3');
HottelingT2.push('0.5');
HottelingT2.push('0.5');
HottelingT2.push('0.7')
HottelingT2.push('0.8');
HottelingT2.push('0.9');
HottelingT2.push('0.4');
HottelingT2.push('0.5');
HottelingT2.push('0.6');

XLables.push('abc')
XLables.push('bdef');
XLables.push('ceff');
XLables.push('ddds');
XLables.push('edf');
XLables.push('fdf');
XLables.push('abc')
XLables.push('bdef');
XLables.push('ceff');
XLables.push('dddsert');
XLables.push('edf');
XLables.push('fdf');
XLables.push('abcert')
XLables.push('bdefert');
XLables.push('ceffert');
XLables.push('retret');
XLables.push('edfert');
XLables.push('fdfret');
XLables.push('bdefert');
XLables.push('ceff');
XLables.push('ddds');
XLables.push('edf');
XLables.push('fdf');

$(function () {
             $(document).ready(function () {        
                 Highcharts.setOptions({
                     global: {
                         useUTC: false
                     }
                 });
  // Ellipse Plot
          EllipseChartData = new Highcharts.Chart({
                     chart: {
                         renderTo: 'EllipseContainer',
                         type: 'scatter',
                         marginRight: 10,
                         zoomType: 'xy',
                         events: {
                             load: function () {                             

                                 // set up the updating of the chart each second
                                EllipseSeries = this.series[0];                                
                                  setInterval(function () {                                    
                                    EllipseShift = EllipseSeries.data.length > 20;                         

                                    if (!isNaN(QResiduals[InfluenceCnt]) &&  $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") {  //alert(QResiduals[InfluenceCnt]); 
                                         var x = HottelingT2[InfluenceCnt], // current time 
                                             y = parseFloat(QResiduals[InfluenceCnt]);    
                                         InfluenceCnt++;                                                                          
                                         EllipseSeries.addPoint([x,y], true, EllipseShift);                                         
                                       }                                     
                                 }, 1000);
                             }
                         }
                     },
                     title: {
                         text: 'Ellipse Plot'
                     },
                     xAxis: {
                         title: {
                             text: 'Sample'
                         },
                         categories:XLables,
                         plotLines: [{                           
                            value:2.5,
                            color: 'red',
                            dashStyle: 'shortdash',
                            width: 2,
                            label: {
                                text: ''
                            }
                         }]
                     },
                     yAxis: {
                         title: {
                             text: ''
                         },
                         plotLines: [{                            
                            value: 0.4,
                            color: 'red',
                            dashStyle: 'shortdash',
                            width: 2,
                            label: {
                                text: ''
                            }
                         }]
                     },
                     tooltip: {
                         formatter: function () {
                             return '<b>' + this.series.name + '</b><br/>X: ' +
                        this.x + '<br/> Y: ' +
                        Highcharts.numberFormat(this.y, 2);
                         }
                     },
                     legend: {
                         enabled: false
                     },
                     exporting: {
                         enabled: true
                     },
                    series: [{
                        name: 'Ellipse Plot',
                        data: []
                    }]
                 });


             });

         });

var-influencent=0；
var QResiduals=[]；
var-XLables=[]；
var HottelingT2=[]；
var EllipseChartData；
var Ellipsheshift；
QResiduals.push（'0.5356899'）；
QResiduals.push（'0.3356899'）；
QResiduals.push（'0.6356899'）；
QResiduals.push（'0.2356899'）；
QResiduals.push（'0.8356899'）；
QResiduals.push（'0.2356899'）；
QResiduals.push（'0.4356899'）；
QResiduals.push（'0.4356899'）；
QResiduals.push（'0.4356899'）；
QResiduals.push（'0.2356899'）；
QResiduals.push（'0.2356899'）；
QResiduals.push（'0.5356899'）；
QResiduals.push（'0.8356899'）；
QResiduals.push（'0.9356899'）；
QResiduals.push（'0.5356899'）；
QResiduals.push（'0.7356899'）；
QResiduals.push（'0.2356899'）；
QResiduals.push（'0.1356899'）；
QResiduals.push（'0.0356899'）；
QResiduals.push（'0.5356899'）；
QResiduals.push（'0.8356899'）；
QResiduals.push（'0.7356899'）；
Hotteling2.push（'0.1'）
Hotteling2.push（'0.2'）；
Hotteling2.push（'0.3'）；
Hotteling2.push（'0.4'）；
Hotteling2.push（'0.5'）；
Hotteling2.push（'0.6'）；
Hotteling2.push（'0.4'）
Hotteling2.push（'0.5'）；
Hotteling2.push（'0.3'）；
Hotteling2.push（'0.2'）；
Hotteling2.push（'0.6'）；
Hotteling2.push（'0.7'）；
Hotteling2.push（'0.8'）
Hotteling2.push（'0.9'）；
Hotteling2.push（'0.2'）；
Hotteling2.push（'0.3'）；
Hotteling2.push（'0.5'）；
Hotteling2.push（'0.5'）；
Hotteling2.push（'0.7'）
Hotteling2.push（'0.8'）；
Hotteling2.push（'0.9'）；
Hotteling2.push（'0.4'）；
Hotteling2.push（'0.5'）；
Hotteling2.push（'0.6'）；
XLables.push（'abc'）
XLables.push（'bdef'）；
XLables.push（'ceff'）；
XLables.push（'ddds'）；
XLables.push（“edf”）；
XLables.push（'fdf'）；
XLables.push（'abc'）
XLables.push（'bdef'）；
XLables.push（'ceff'）；
XLables.push（'dddsert'）；
XLables.push（“edf”）；
XLables.push（'fdf'）；
XLables.push（'abcert'）
XLables.push（'bdefert'）；
XLables.push（'ceffert'）；
XLables.push（'retret'）；
XLables.push（'edfert'）；
XLables.push（'fdfret'）；
XLables.push（'bdefert'）；
XLables.push（'ceff'）；
XLables.push（'ddds'）；
XLables.push（“edf”）；
XLables.push（'fdf'）；
$（函数（）{
$（文档）.ready（函数（）{
Highcharts.setOptions({
全球：{
useUTC:false
}
});
//椭圆图
EllipseChartData=新的Highcharts.图表({
图表：{
renderTo:“EllipseContainer”，
键入：“散布”，
marginRight:10，
zoomType:'xy'，
活动：{
加载：函数（）{
//设置图表的每秒更新
EllipseSeries=this.series[0]；
setInterval（函数（）{
EllipseShift=EllipseSeries.data.length>20；
如果（！isNaN（QResiduals[influencent]）&&$.isNumeric（QResiduals[influencent]）&&typeof（QResiduals[influencent]）！=“未定义”）{//alert（QResiduals[influencent]）；
var x=HottelingT2[influencent]，//当前时间
y=parseFloat（QResiduals[influencent]）；
influencent++；
添加点（[x，y]，真，EllipseShift）；
}                                     
}, 1000);
}
}
},
标题：{
文本：“椭圆图”
},
xAxis：{
标题：{
文本：“示例”
},
类别：XLables，
绘图线：[{
价值：2.5，
颜色：“红色”，
短跑风格：“短跑”，
宽度：2，
标签：{
文本：“”
}
}]
},
亚克斯：{
标题：{
文本：“”
},
绘图线：[{
数值：0.4，
颜色：“红色”，
短跑风格：“短跑”，
宽度：2，
标签：{
文本：“”
}
}]
},
工具提示：{
格式化程序：函数（）{
返回“+this.series.name+”
X:'+
这个.x+'
Y:'+
数字格式（this.y，2）；
}
},
图例：{
已启用：false
},
出口：{
已启用：true
},
系列：[{
名称：'椭圆图'，
数据：[]
}]
});
});
});

---

提前感谢。

您的宽度有限，因此标签的宽度

return '<div class="ownlabel">'+this.value+'</div>';

                 xAxis: {
                     allowDecimals: false,
                     labels: {
                          formatter: function() {
                              return XLables[this.value];
                          }
                     }       
                 }