Highchart - 如何在半圆饼图中创建附加的图像测量仪 [英] Highchart - How do I create the attached image gauge within a semicircle pie chart

问题描述

带三角形标尺的半圆形馅饼

如何在图表顶部用三角形量表创建上述半圆形饼图。

我有速度表测量工作，但不符合需要。

在highchart api中有没有使用三角形的方式，而不是速度表？

感谢

解决方案

这里是调整后的JSON的小提琴。 $ b

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

  $（function（）{
 $（'＃container'）。highcharts（{
 chart：{
 renderTo：'容器'，
 plotBackgroundColor：null，
 plotBackgroundImage：null，
 plotBorderWidth：0，
 plotShadow：false 
}，
 title：{
 text：'40％< br>概率成功'，
 align：'center'，
 verticalAlign：'bottom'，
y：-145 
 }，
 tooltip：{
 pointFormat：'{series.name}：< b> {point.percentage：.1f}％< / b>'
}，
窗格：{
 ce nter：['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，
标签：{
启用：false 
}，
标题：{
 text：'' ，//'< div class =gaugeFooter> 46％Rate< / div>'，
 useHTML：true，
y：80 
}，
 / * plotBands ：[{
 from：0，
 to：46，
 color：'pink'，
 innerRadius：'100％'，
 outerRadius：'0％' 
}，{
从：46，
到：90，
颜色：'tan'，
 innerRadius：'100％'，
 outerRadius：'0％'
}]，* / 
窗格：0，
 
}]，
 plotOptions：{
 pie：{
 dataLabels：{
 enabled：true，
 distance：-50，
 style：{
 fontWeight：'大胆'，
颜色：'白色'，
 textShadow：'0px 1px 2px黑色'
} 
}，
 startAngle：-90，
 endAngle ：90，
中心：['50％'，'75％'] 
}，
量表：{
 dataLabels：{
启用：false 
 
 $ {b $ b半径：80，
 borderWidth：2，
 borderColor：'transparent'，
 backgroundColor：'white'
} ，
拨号：{
 radius：'100％'，
 backgroundColor：'gray'，
 borderColor：'gray'，
 baseW宽度：140，
 topWidth：1，
 baseLength：'10％'，//半径
 rearLength：'10％'
} 
} 
 $，
 
系列：[{
类型：'pie'，
名称：'浏览器分享'，
 innerSize：'50％'，
数据：[
 ['Low'，25]，
 ['Medium'，25]，
 ['HIgh'，25] 
] 
}， {
 type：'gauge'，
 data：[40]，
 dial：{
 rearLength：0 
} 
}]，
}）; 
}）; 
  

Semi Circle Pie With Triangle Gauge

How do I create the above semicircle pie chart with a triangle gauge at the top of the chart.

I have the speedometer gauge working, but it doesn't meet the needs.

Is there a way within the highchart api to use a triangle for the gauge, and not the speedometer?

Thanks

解决方案

Here is the fiddle with the tweaked 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
      }
    }],
  });
});

这篇关于Highchart - 如何在半圆饼图中创建附加的图像测量仪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！