Highcharts - Pie полукруг (стрелка на графике)

Question

Я пытался вставить стрелку в поле круга кольцевой диаграммы (как спидометр имеет)

попробовал все, но никакого результата для меня

это он на образ, что я хочу сделать

Я создал jsfiddle.net/ymf2zzn1/, чтобы продемонстрировать мой вопрос

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      renderTo: 'container', 
 
      plotBackgroundColor: null, 
 
      plotBackgroundImage: null, 
 
      plotBorderWidth: 0, 
 
      plotShadow: false 
 
     }, 
 
     title: { 
 
      text: 'Browser<br>shares<br>2015', 
 
      align: 'center', 
 
      verticalAlign: 'top', 
 
      y: 40 
 
     }, 
 
     tooltip: { 
 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 
     }, 
 
\t \t yAxis: [{ 
 
\t   min: 0, 
 
\t   max: 90, 
 
      minorTickLength: 0, 
 
      tickLength: 0, 
 
      tickWidth: 0, 
 
\t   labels: { 
 
\t   \t enabled: false 
 
\t   }, 
 
      title: { 
 
       text: '<div class="gaugeFooter">46% Rate</div>', 
 
       useHTML: true, 
 
       y: 80 
 
      }, 
 
\t   plotBands: [{ 
 
\t   \t from: 0, 
 
\t   \t to: 46, 
 
\t   \t color: 'pink', 
 
\t   \t innerRadius: '100%', 
 
\t   \t outerRadius: '0%' 
 
\t   },{ 
 
\t   \t from: 46, 
 
\t   \t to: 90, 
 
\t   \t color: 'tan', 
 
\t   \t innerRadius: '100%', 
 
\t   \t outerRadius: '0%' 
 
\t   }], 
 
\t   pane: 0, 
 
\t   
 
\t  }], 
 
     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: { 
 
\t  \t \t dataLabels: { 
 
\t  \t \t \t enabled: false 
 
\t  \t \t }, 
 
\t  \t \t dial: { 
 
\t  \t \t \t radius: '100%' 
 
\t  \t \t } 
 
\t  \t } 
 
     }, 
 
     series: [{ 
 
      type: 'pie', 
 
      name: 'Browser share', 
 
      innerSize: '50%', 
 
      data: [ 
 
       ['Firefox', 25], 
 
       ['IE',  25], 
 
       ['Chrome', 25], 
 
       ['Opera',  25] 
 
      ] 
 
     }], 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 1

Вы можете использовать две серии - один для пирога, а другой для углового датчика.

JSFiddle: http://jsfiddle.net/ymf2zzn1/1/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: null, 
      plotBackgroundImage: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser<br>shares<br>2015', 
      align: 'center', 
      verticalAlign: 'top', 
      y: 40 
     }, 
     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 
       }, 
       dial: { 
        radius: '100%' 
       } 
      } 
     }, 

     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      innerSize: '50%', 
      data: [ 
       ['Firefox', 25], 
       ['IE',  25], 
       ['Chrome', 25], 
       ['Opera',  25] 
      ] 
     },{ 
      type: 'gauge', 
      data: [40], 
      dial: { 
       rearLength: 0 
      } 
     }], 
    });  
});