highcharts在x轴上为每个点使用用户定义的标签进行1秒更新
这是现场散点图的简化版本 现在我在x轴上得到了像这样的0 1 2等。我希望在x轴上有用户定义的名称。x轴标签应该从XLables数组中拾取 我在这里添加了来自JSFIDLE的相同代码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
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。我需要相应的值。