highcharts在x轴上为每个点使用用户定义的标签进行1秒更新

highcharts在x轴上为每个点使用用户定义的标签进行1秒更新,highcharts,highstock,Highcharts,Highstock,这是现场散点图的简化版本 现在我在x轴上得到了像这样的0 1 2等。我希望在x轴上有用户定义的名称。x轴标签应该从XLables数组中拾取 我在这里添加了来自JSFIDLE的相同代码 var InfluenceCnt=0; var QResiduals=[]; var XLables=[]; var HottelingT2=[]; var EllipseChartData; var EllipseShift; QResiduals.push('0.5356899'); QResi

这是现场散点图的简化版本

现在我在x轴上得到了像这样的0 1 2等。我希望在x轴上有用户定义的名称。x轴标签应该从XLables数组中拾取

我在这里添加了来自JSFIDLE的相同代码

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

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

XLables.push('a')
XLables.push('b');
XLables.push('c');
XLables.push('d');
XLables.push('e');
XLables.push('f');

 $(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'
                     },
                     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: ' +
                    Highcharts.numberFormat(this.x, 2) + '<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.5356899');
QResiduals.push('0.6356899');
QResiduals.push('0.2356899');
QResiduals.push('0.3356899');
QResiduals.push('0.1356899');
Hotteling2.push('0.1')
Hotteling2.push('0.2');
Hotteling2.push('0.3');
Hotteling2.push('0.4');
Hotteling2.push('0.5');
Hotteling2.push('0.6');
XLables.push('a')
XLables.push('b');
XLables.push('c');
XLables.push('d');
XLables.push('e');
XLables.push('f');
$(函数(){
$(文档).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:{
标题:{
文本:“示例”
},
绘图线:[{
价值:2.5,
颜色:“红色”,
短跑风格:“短跑”,
宽度:2,
标签:{
文本:“”
}
}]
},
亚克斯:{
标题:{
文本:“”
},
绘图线:[{
数值:0.4,
颜色:“红色”,
短跑风格:“短跑”,
宽度:2,
标签:{
文本:“”
}
}]
},
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
X:'+ Highcharts.numberFormat(this.x,2)+'
Y:'+ 数字格式(this.y,2); } }, 图例:{ 已启用:false }, 出口:{ 已启用:true }, 系列:[{ 名称:'椭圆图', 数据:[] }] }); }); });
您需要的选项是xAxis上的“类别”。试试这个:

xAxis: {
      title: {
           text: 'Sample'
      },
      categories:XLables,

要修复工具提示,只需参考“this.x”,它将返回类别名称:

                tooltip: {
                     formatter: function () {
                         return '<b>' + this.series.name + '</b><br/>X: ' +
                    this.x + '<br/> Y: ' +
                    Highcharts.numberFormat(this.y, 2);
                     }
                 },
工具提示:{
格式化程序:函数(){
返回“+this.series.name+”
X:'+ 这个.x+'
Y:'+ 数字格式(this.y,2); } },

您可以使用允许定义“显示的标签”的类别或标签格式化程序。非常感谢。它工作正常,但我在所有工具提示中都得到了X:0.00。我需要相应的值。