ゲージチャート付きハイチャートセミサークル。縮小円グラフとゲージ移動

Question

私は半円とゲージのチャートでjsfiddleを持っています。私は円グラフを縮小し、円グラフの中央にゲージがとどまった。矢印を円グラフの下に移動したい。

私が欲しいものは添付の画像を参照してください。

私が持っているもののためのフィドルを参照してください： http://jsfiddle.net/mschreiberjdi/xumhy0zL/

enter code here 

Answer 1

私は私が作った変更を正確に覚えていないけど、それを周りいじった後、私は「何を思い付きました再探しています。

http://jsfiddle.net/467pyero/

あなたはあなたが前にそれを持っていたどのようにそれを得るために、灰色の三角形の設定でプレイする必要がありますが、それはかなり簡単なはずです。

基本的に私が行ったことは、すべてをキャンバスの一番下に移動しています。 yセンターの内側の文字盤は95％下にあり、そのサイズは80％に設定されているので、外側の文字盤の内側に完全にフィットします。明確にするため、nullの代わりにbackgroundColorを'silver'に設定することができます。

$(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: -70 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    pane: { 
     center: ['50%', '95%'], 
     size: '80%', 
     startAngle: -90, 
     endAngle: 90, 
     background: { 
     borderWidth: 0, 
     backgroundColor: null, 
     innerRadius: '90%', 
     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 
     }, 
     pane: 0, 

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

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