Question

我有一个带有半圆和仪表图表的jsfiddle。我缩小了饼图，并且测量仪停留在饼图的中间。我想将箭头移动到饼图的底部。

请参阅附图，了解我想要的内容。

看到我所拥有的小提琴： http://jsfiddle.net/mschreiberjdi/xumhy0zL/

enter code here

Answer 1

我不记得我做了哪些改变，但在摆弄它之后，我想出了你正在寻找的东西。

http://jsfiddle.net/467pyero/

您需要使用灰色三角形的设置来获取它之前的方式，但这应该非常简单。

基本上我所做的就是将所有内容都移到画布的底部。 y中心内部表盘底部为95％，尺寸设定为80％，使其完美贴合外部表盘。要更清楚地看到它，您可以将其backgroundColor设置为'silver'而不是null。

$(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
      }
    }],
  });
});

Highchart Semi Circle with Gauge Chart。收缩饼图并移动仪表

1 个答案: