HighCharts Solid Gauge Chart zeigt keine Ticks an

Question

Verwenden von Highcharts 5.0.11 .JS Version und Solid Gauge. Seite hat zwei Temperaturanzeigen, die halbmondförmig sein werden. Die erste interne Temperaturanzeige ist in Ordnung, aber wenn Sie versuchen, mit Einstellungen zu spielen, um eine inverse Anzeige zu erstellen, stoppt das Diagramm die Anzeige von Markierungen und Beschriftungen wie unten gezeigt, zusammen mit dem Link zu meiner Geige. Der Schlüssel, den ich gefunden habe, ist, dass, wenn der Anfangswinkel höher als der Endwinkel ist, dies das Ergebnis ist und das Problem auftritt.

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

ich verschiedene Einstellungen und die nächsten Ergebnisse versucht haben, ich erreichen kann, ist unter Verwendung der umgekehrt: true Option und die mit Anfangswinkel niedriger als der Endwinkel, das einzige Problem ist, dass die Handlungslinie von a gezeichnet wird Startpunkt von 40. Ich kann es erfordern von -15 und ziehen bis 5.

Js Fiddle for second result

Javascript zu starten - Die einzige Änderung ist das umgekehrt: true hinzugefügt am yAchse und die Start- und Endwinkel für das Fenster.

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

Ich habe gesucht und gefunden ein Problem ab 2015 mit Maßverkörperung Charts HERE und zu versuchen, zu tun, was ich getan habe. Dieses Problem scheint behoben zu sein und ich kann nichts anderes finden, um zu zeigen, dass dies ein ausstehendes Problem mit der Highcharts-Plattform ist.

Vielen Dank im Voraus von jedem, der sich die Zeit nimmt, diese Frage zu lesen und zu überprüfen.

Answer 1

Es scheint, dass es ein Problem mit der automatischen Berechnung der Zeckenpositionen ist, wenn endAngle größer als startAngle ist. Sie können die Tick-Positionen erzwingen, indem Sie die Achsen tickPositions oder tickPositioner setzen. In Ihrem Fall können Sie die Tick-Positionen aus dem ersten Anzeigediagramm im Tick-Positioner-Callback abrufen.

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

Beispiel: http://jsfiddle.net/egr0ge11/