Question

使用Highcharts 5.0.11 .JS版本和Solid Gauge。 Page有两个温度计，形状为半月牙形。第一个Gauge内部温度很好，但是当尝试使用设置来创建反量表时，图表会停止显示与它们相关的刻度和标签，如下所示以及与我的小提琴的链接。我发现的关键是，当起始角度高于结束角度时，这就是结果并且出现问题。

JS Fiddle Here to show Code for above

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>

<!--Temperature Block-->
<div style="width: 600px; height: 200px; margin: 0 auto; background-color: black;">
  <div id="containerinternalTemp" style="width: 200px; height: 200px; float: left"></div>
  <div id="containerexternalTemp" style="width: 200px; height: 200px; float: left"></div>
</div>

的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>'
       }
     }]
   }));
 });

我尝试了各种设置，我可以实现的最接近的结果是使用reverse：true选项并且开始角度低于结束角度，唯一的问题是绘制线是从40的起点绘制的我要求它从-15开始并绘制到5。

Js Fiddle for second result

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>'
       }
     }]
   }));

我已经搜索过，并在2015年发现了Solid Gauge图表HERE并试图完成我所做的事情。这个问题看起来已经修复，我找不到其他任何东西来证明这是Highcharts平台的一个突出问题。

非常感谢任何花时间阅读和回顾这个问题的人。

Answer 1

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

$("#numberInput").on("change", function() {
var x = 20;
if ((Number("#numberInput")) > Number(x)) {
     $("#disableThis").attr("disabled",true);
}

示例：http://jsfiddle.net/egr0ge11/

HighCharts Solid Gauge Chart不显示刻度

1 个答案: