在Highcharts实心量规中标记Y轴止动块

在Highcharts实心量规中标记Y轴止动块,highcharts,Highcharts,我有一个坚固的仪表,看起来像这样: 到目前为止,我已经达到了以下要求: 仪表范围为0到50 如果值小于40,则以红色显示,否则以绿色显示 显示主要刻度 如果可能的话,我想补充以下内容: 指示代码中定义的Y轴停止的东西 换句话说,我要添加的是下图中的“250”指示器: 它不一定是一个额外的数字,只是一些东西,任何东西,标志着每一站 JSFIDLE源代码如下: var计量选项={ 图表:{ 类型:“solidgauge”, 背景颜色:空 }, 标题:空, 窗格:{ 中心:['35%,'7

我有一个坚固的仪表,看起来像这样:

到目前为止,我已经达到了以下要求:

  • 仪表范围为0到50
  • 如果值小于40,则以红色显示,否则以绿色显示
  • 显示主要刻度
如果可能的话,我想补充以下内容:

  • 指示代码中定义的Y轴停止的东西
换句话说,我要添加的是下图中的“250”指示器:

它不一定是一个额外的数字,只是一些东西,任何东西,标志着每一站

JSFIDLE源代码如下:

var计量选项={
图表:{
类型:“solidgauge”,
背景颜色:空
},
标题:空,
窗格:{
中心:['35%,'75%'],
大小:“100%”,
startAngle:-90,
端角:90,
背景:{
背景颜色:“白色”,
内半径:“60%”,
外层:“100%”,
形状:“圆弧”
}
},
工具提示:{
已启用:false
},
//价值轴
亚克斯:{
//添加一些指示每个站点的内容
停止:[
[0.8,‘红色’],
[1.0,“绿色”]
],
线宽:0,
滴答声间隔:10,//保留这些滴答声的标签
minorTickInterval:2.5,
标题:空,
标签:{
y:-5,
风格:{
“颜色”:“黑色”,
“fontWeight”:“bold”
}
}
}
};
var chart=Highcharts.chart('chartContainer',Highcharts.merge(gaugeOptions{
亚克斯:{
分:0,,
最高:50,
标题:空
},
学分:{
已启用:false
},
出口:{
已启用:false
},
系列:[{
姓名:“ABC”,
数据:[30],
数据标签:{
格式化程序:函数(){
返回此.point.y;
},
y:-20,
风格:{
textShadow:false,
“颜色”:“黑色”,
“fontSize”:“2em”
},
边框宽度:0
},
工具提示:{
valueSuffix:'公里/小时'
}
}]
}));

如果我正确理解您的要求 可能这将有助于不完全符合您的要求无论如何作为一个替代方案

您也可以尝试:-

plotBands: [{
      from: 39.5,
      to: 40.5,
      color: '#55BF3B' // green
}]
var计量选项={
图表:{
类型:“solidgauge”,
背景颜色:空
},
标题:空,
窗格:{
中心:['35%,'75%'],
大小:“100%”,
startAngle:-90,
端角:90,
背景:{
背景颜色:“白色”,
内半径:“60%”,
外层:“100%”,
形状:“圆弧”
}
},
工具提示:{
已启用:false
},
//价值轴
亚克斯:{
停止:[
[0.8,‘红色’],
[1.0,“绿色”]
],
线宽:0,
时间间隔:10,
minorTickInterval:2.5,
标题:空,
标签:{
y:-5,
风格:{
“颜色”:“黑色”,
“fontWeight”:“bold”
}
}
}
};
var chart=Highcharts.chart('chartContainer',Highcharts.merge(gaugeOptions{
亚克斯:{
分:0,,
最高:50,
标题:空,
绘图带:[{
起:0,,
致:40,,
颜色:'#55BF3B'//绿色
}]
},
学分:{
已启用:false
},
出口:{
已启用:false
},
系列:[{
姓名:“ABC”,
数据:[31],
数据标签:{
格式化程序:函数(){
返回此.point.y;
},
y:-20,
风格:{
textShadow:false,
“颜色”:“黑色”,
“fontSize”:“2em”
},
边框宽度:0
},
工具提示:{
valueSuffix:'公里/小时'
}
}]
}));

如果我正确理解您的要求 可能这将有助于不完全符合您的要求无论如何作为一个替代方案

您也可以尝试:-

plotBands: [{
      from: 39.5,
      to: 40.5,
      color: '#55BF3B' // green
}]
var计量选项={
图表:{
类型:“solidgauge”,
背景颜色:空
},
标题:空,
窗格:{
中心:['35%,'75%'],
大小:“100%”,
startAngle:-90,
端角:90,
背景:{
背景颜色:“白色”,
内半径:“60%”,
外层:“100%”,
形状:“圆弧”
}
},
工具提示:{
已启用:false
},
//价值轴
亚克斯:{
停止:[
[0.8,‘红色’],
[1.0,“绿色”]
],
线宽:0,
时间间隔:10,
minorTickInterval:2.5,
标题:空,
标签:{
y:-5,
风格:{
“颜色”:“黑色”,
“fontWeight”:“bold”
}
}
}
};
var chart=Highcharts.chart('chartContainer',Highcharts.merge(gaugeOptions{
亚克斯:{
分:0,,
最高:50,
标题:空,
绘图带:[{
起:0,,
致:40,,
颜色:'#55BF3B'//绿色
}]
},
学分:{
已启用:false
},
出口:{
已启用:false
},
系列:[{
姓名:“ABC”,
数据:[31],
数据标签:{
格式化程序:函数(){
返回此.point.y;
},
y:-20,
风格:{
textShadow:false,
“颜色”:“黑色”,
“fontSize”:“2em”
},
边框宽度:0
},
工具提示:{
valueSuffix:'公里/小时'
}
}]
}));

您可以使用额外的yAxis来获得额外的刻度。附加轴应位于主轴上。然后,它与主轴具有相同的比例,您可以控制其他独立的刻度-您可以通过定义特定的刻度

实例和输出

如果需要具有不同颜色和样式的记号,可以添加更多轴


您可以使用额外的yAxis来获得额外的滴答声。附加轴应位于主轴上。然后,它与主轴具有相同的比例,您可以控制其他独立的刻度-您可以通过定义特定的刻度

实例和输出

如果需要具有不同颜色和样式的记号,可以添加更多轴


事情是这样的。我已经有了间隔10次的主刻度的现有标签。我想保留这些。然后,我还需要一些额外的东西来指示y轴在40处的停止。有点像您所做的,但没有删除预先存在的记号标签。S