Highcharts Spur Styling und das Hinzufügen von CSS-Elemente

Question

ich auf einem Lehrmodul gerade arbeite, die aussehen soll wie folgt:

Hydration Guage

Derzeit habe ich das folgende Modell arbeiten:

(Bitte beziehen sich auf die Geige für den aktualisierten Code)

GaugeFiddle

$(function() { 

    var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     type: 'gauge' 
    }, 
    title: { 
     text: 'Hydration Index' 
    }, 

    pane: { 
     startAngle: -140, 
     endAngle: 140, 
     size: 200, 
     background: { 
     backgroundColor: { 
      linearGradient: [0, 300, 300, 300], 
      stops: [ 
      [0, 'rgb(152, 230, 230)'], 
      [1, 'rgb(0, 0, 10)'] 
      ] 
     }, 
     innerRadius: '70%', 
     outerRadius: '100%', 
     shape: 'arc', 
     } 
    }, 


    yAxis: { 
     reversed: true, 
     min: 0, 
     max: 100, 
     plotBands: [{ // mark the weekend 
     }], 
     tickInterval: 600 
    }, 


    plotOptions: { 

     gauge: { 
     dataLabels: { 
      enabled: false 
     }, 

     dial: { 
      radius: '100%', 
      backgroundColor: 'black', 
      borderColor: 'white', 
      borderWidth: 0.5, 
      rearLength: 0, 
      baseWidth: 10, 
      topWidth: 1, 
      baseLength: '0%' 
     }, 
     pivot: { 
      radius: 0 
     } 
     }, 

    }, 


    series: [{ 
     name: 'Hydration percent', 
     data: [20], 
    }], 

    credits: { 
     enabled: false 
    }, 
    }); 

}); 

1) Wie würde ich diese gekrümmten Kanten nur auf einer Seite des Messgeräts hinzufügen?

2) Kann ich die Richtung der Nadel von rechts nach links umkehren? Derzeit habe ich die Yaxis umgekehrt, so dass das Diagramm funktioniert, aber es beginnt intuitiv hoch und läuft von dort weiter. Wenn also mein Diagramm von 0-100 und mein Datenwert 10 ist, würde es anfangen bei 100 und gehen Sie standardmäßig auf 10).

3) Schließlich, gibt es irgendeine Möglichkeit für mich, den dynamischen Text hinzuzufügen, der sich auf dem Ergebnis ändert?

Answer 1

1. Es ist möglich, aber ein bisschen schwierig - Sie Pfad des SVG ändern kann, bevor es Renderer ist durch Axis.getPlotBandPath Methode modyfying. Sehen Sie sich eine Demo an.

2. Sie einfach anfängliche Animation deaktivieren und Sollwert = 0. Dann in Rückruf, den Punkt auf den richtigen Wert aktualisieren:

   series: [{ 
       name: 'Hydration percent', 
       animation: false, 
       data: [ 
       0 
       ] 
   }], 
   

   Und Rückruf:

   function(chart) { // on complete 
       chart.series[0].points[0].update(80); 
       ... 
   } 
   

3. Es ist nicht ein Problem mit Renderer.text. Zum Beispiel:

   chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable 
   

   Dann Text aktualisieren:

   chart.myLabel.attr({ 
       text: 'Nice!' 
   }); 
   

Hier ist ein funktionierendes Demo: http://jsfiddle.net/8p8ab8bg/