Highchart - Wie erstelle ich das beigefügte Bild Messer innerhalb eines Halbkreises Kreisdiagramm

Question

Halbkreis-Torte mit Triangle Spur

Wie kann ich den oben Halbkreis Kreisdiagramm mit einem Dreieck Lehre schaffen an der Spitze die Grafik.

Ich habe das Tachometer funktioniert, aber es erfüllt nicht die Bedürfnisse.

Gibt es einen Weg innerhalb der Highchart API, ein Dreieck für das Messgerät zu verwenden, und nicht den Tacho?

Danke

Answer 1

Hier ist die Geige mit dem optimierten JSON.

https://jsfiddle.net/mschreiberjdi/nwb7vL62/

$(function() { 
    $('#container').highcharts({ 
    chart: { 
     renderTo: 'container', 
     plotBackgroundColor: null, 
     plotBackgroundImage: null, 
     plotBorderWidth: 0, 
     plotShadow: false 
    }, 
    title: { 
     text: '40%<br>Probability Of <br>Success', 
     align: 'center', 
     verticalAlign: 'bottom', 
     y: -145 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    pane: { 
     center: ['50%', '75%'], 
     size: '50%', 
     startAngle: -90, 
     endAngle: 90, 
     background: { 
     borderWidth: 0, 
     backgroundColor: 'none', 
     innerRadius: '60%', 
     outerRadius: '100%', 
     shape: 'arc' 
     } 
    }, 
    yAxis: [{ 
     lineWidth: 0, 
     min: 0, 
     max: 90, 
     minorTickLength: 0, 
     tickLength: 0, 
     tickWidth: 0, 
     labels: { 
     enabled: false 
     }, 
     title: { 
     text: '', //'<div class="gaugeFooter">46% Rate</div>', 
     useHTML: true, 
     y: 80 
     }, 
     /*plotBands: [{ 
     from: 0, 
     to: 46, 
     color: 'pink', 
     innerRadius: '100%', 
     outerRadius: '0%' 
     },{ 
     from: 46, 
     to: 90, 
     color: 'tan', 
     innerRadius: '100%', 
     outerRadius: '0%' 
     }],*/ 
     pane: 0, 

    }], 
    plotOptions: { 
     pie: { 
     dataLabels: { 
      enabled: true, 
      distance: -50, 
      style: { 
      fontWeight: 'bold', 
      color: 'white', 
      textShadow: '0px 1px 2px black' 
      } 
     }, 
     startAngle: -90, 
     endAngle: 90, 
     center: ['50%', '75%'] 
     }, 
     gauge: { 
     dataLabels: { 
      enabled: false 
     }, 
     pivot: { 
      radius: 80, 
      borderWidth: 2, 
      borderColor: 'transparent', 
      backgroundColor: 'white' 
     }, 
     dial: { 
      radius: '100%', 
      backgroundColor: 'gray', 
      borderColor: 'gray', 
      baseWidth: 140, 
      topWidth: 1, 
      baseLength: '10%', // of radius 
      rearLength: '10%' 
     } 
     } 
    }, 

    series: [{ 
     type: 'pie', 
     name: 'Browser share', 
     innerSize: '50%', 
     data: [ 
     ['Low', 25], 
     ['Medium', 25], 
     ['HIgh', 25] 
     ] 
    }, { 
     type: 'gauge', 
     data: [40], 
     dial: { 
     rearLength: 0 
     } 
    }], 
    }); 
});