2016-08-02 124 views
1

半圓餡餅三角計Highchart - 如何半圓餅圖

Semi Circle Pie With Triangle Gauge

如何在頂部創建上述半圓餅圖用三角形計內創建附加的圖像計圖表。

我有車速表測量工作,但它不符合需要。

是否有一種方法在高圖表中使用三角形而不是車速表?

謝謝

+1

看到這個的jsfiddle http://jsfiddle.net/mschreiberjdi/fL0Lsqa8/5/ –

+0

請問這個例子符合你的要求? http://jsfiddle.net/fL0Lsqa8/8/ –

+0

是否可以將標題文本移動到三角形下方並位於半圓餅圖的中心? –

回答

-1

這裏是與調整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 
     } 
    }], 
    }); 
}); 
+0

你刪除了小提琴嗎? –

+0

現在點擊小提琴。我改變了它。 –