Javascript HighCharts实心仪表图不显示刻度

使用Highcharts 5.0.11.JS版本和Solid Gauge。 佩奇有两个半月牙形的温度计。 第一个仪表内部温度正常，但当尝试使用设置创建反向仪表时，图表将停止显示与其相关的刻度和标签，如下图所示，以及指向我的小提琴的链接。我发现的关键是，当起始角高于结束角时，这就是结果，问题就出现了

HTML

JavaScript

 $(function() {
   // Temperature Guage Options
   var temperatureGaugeOptions = {
     chart: {
       backgroundColor: null,
       type: 'solidgauge'
     },
     title: null,
     pane: {
       size: '90%',
       background: {
         backgroundColor: 'white',
         innerRadius: '93%',
         outerRadius: '102%',
         shape: 'arc'
       }
     },
     tooltip: {
       enabled: false
     },
     credits: {
       enabled: false
     },

     // the value axis
     yAxis: {
       stops: [
         [0, '#045ce2'],
         [0.1, '#045ce2'],
         [0.2, '#045ce2'],
         [0.25, '#045ce2'],
         [0.3, '#0489e2'],
         [0.4, '#0489e2'],
         [0.5, '#04cbe2'],
         [0.52, '#04cbe2'],
         [0.521, '#f9c527'],
         [0.6, '#f9a426'],
         [0.7, '#f98826'],
         [0.8, '#f95e26'],
         [0.9, '#f95e26']
       ],
       lineWidth: 0,
       minorTickInterval: 5,
       tickPixelInterval: 50,
       tickWidth: 1,
       labels: {
         style: {
           color: 'white'
         },
         enabled: true,
         distance: 12,
         useHTML: true
       }
     },
     plotOptions: {
       solidgauge: {
         innerRadius: '95%',
         dataLabels: {
           x: -20,
           y: 35,
           borderWidth: 0,
           useHTML: true
         }
       }
     }
   };

   // Internal Temperature
   $('#containerinternalTemp').highcharts(Highcharts.merge(temperatureGaugeOptions, {
     yAxis: {
       min: -15,
       max: 40,
     },
     pane: {
       startAngle: -180,
       endAngle: 0,
     },
     series: [{
       name: 'inTemp',
       data: [13],
       dataLabels: {
         style: {
           color: 'orange',
         },
         format: '<div style="text-align:center"><span style="font-size:25px;">{y}&deg;C</span><br/>' + '<span style="font-size:10px;color:white">Internal</span></div>'
       }
     }]
   }));

   // External Temperature
   $('#containerexternalTemp').highcharts(Highcharts.merge(temperatureGaugeOptions, {
     yAxis: {
       min: -15,
       max: 40,
     },
     pane: {
       startAngle: 180,
       endAngle: 0
     },
     series: [{
       name: 'exTemp',
       data: [5],
       dataLabels: {
         style: {
           color: 'orange',
         },
         format: '<div style="text-align:center"><span style="font-size:25px;">{y}&deg;C</span><br/>' + '<span style="font-size:10px;color:white">External</span></div>'
       }
     }]
   }));
 });

$（函数（）{
//温度计选项
var temperatureGaugeOptions={
图表：{
背景颜色：空，
类型：“solidgauge”
},
标题：空，
窗格：{
尺寸：“90%”，
背景：{
背景颜色：“白色”，
内半径：“93%”，
外层：102%，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
学分：{
已启用：false
},
//价值轴
亚克斯：{
停止：[
[0，#045ce2']，
[0.1，#045ce2']，
[0.2，#045ce2']，
[0.25，#045ce2']，
[0.3，#0489e2']，
[0.4，#0489e2']，
[0.5，#04cbe2']，
[0.52，#04cbe2']，
[0.521，#f9c527']，
[0.6'#f9a426']，
[0.7'#f98826']，
[0.8'#f95e26']，
[0.9'#f95e26']
],
线宽：0，
minorTickInterval:5，
像素间隔：50，
宽度：1，
标签：{
风格：{
颜色：“白色”
},
启用：对，
距离：12，
useHTML:true
}
},
打印选项：{
solidgauge：{
内半径：“95%”，
数据标签：{
x:-20，
y:35，
边框宽度：0，
useHTML:true
}
}
}
};
//内部温度
$（“#containerinternalTemp”）.highcharts（highcharts.merge（temperatureGaugeOptions{
亚克斯：{
最小：-15，
最高：40，
},
窗格：{
startAngle:-180，
端角：0，
},
系列：[{
名称：“inTemp”，
数据：[13]，
数据标签：{
风格：{
颜色：“橙色”，
},
格式：“{y}°；C
”+“内部”
}
}]
}));
//外部温度
$（“#containerexternalTemp”）.highcharts（highcharts.merge（temperatureGaugeOptions{
亚克斯：{
最小：-15，
最高：40，
},
窗格：{
startAngle:180，
端角：0
},
系列：[{
姓名：'即兴'，
数据：[5]，
数据标签：{
风格：{
颜色：“橙色”，
},
格式：“{y}°；C
”+“外部”
}
}]
}));
});

我尝试了各种设置，我能获得的最接近的结果如下：使用反转：true选项，并且起点角度低于终点角度，唯一的问题是绘制线的起点为40。我要求它从-15开始，一直到5

Javascript-唯一的更改是在yAxis和窗格的开始和结束角度上添加了反向：true

// External Temperature
   $('#containerexternalTemp').highcharts(Highcharts.merge(temperatureGaugeOptions, {
     yAxis: {
       min: -15,
       max: 40,
       reversed: true
     },
     pane: {
       startAngle: 0,
       endAngle: 180
     },
     series: [{
       name: 'exTemp',
       data: [5],
       dataLabels: {
         style: {
           color: 'orange',
         },
         format: '<div style="text-align:center"><span style="font-size:25px;">{y}&deg;C</span><br/>' + '<span style="font-size:10px;color:white">External</span></div>'
       }
     }]
   }));

//外部温度
$（“#containerexternalTemp”）.highcharts（highcharts.merge（temperatureGaugeOptions{
亚克斯：{
最小：-15，
最高：40，
对
},
窗格：{
startAngle:0，
端角：180
},
系列：[{
姓名：'即兴'，
数据：[5]，
数据标签：{
风格：{
颜色：“橙色”，
},
格式：“{y}°；C
”+“外部”
}
}]
}));

我搜索并发现了2015年的一个问题，使用了可靠的仪表图表，并尝试着做我所做的事情。这个问题看起来已经解决了，我找不到任何其他东西来证明这是Highcharts平台的一个突出问题

---

提前感谢所有花时间阅读和回顾此问题的人。

当endAngle大于startAngle时，自动计算勾号位置似乎是个问题。可以通过设置“轴”或“轴”强制标记位置。在您的情况下，您可以从刻度定位器回调中的第一个仪表图表中获取刻度位置

 yAxis: {
   min: -15,
   max: 40,
   //  reversed: true
   tickPositioner: function() {
     var tickPositions = $('#containerinternalTemp').highcharts().yAxis[0].tickPositions
     return tickPositions;
   }

---

示例：

非常感谢您抽出时间，非常感谢，它提供了我们所希望的。

 yAxis: {
   min: -15,
   max: 40,
   //  reversed: true
   tickPositioner: function() {
     var tickPositions = $('#containerinternalTemp').highcharts().yAxis[0].tickPositions
     return tickPositions;
   }