如何仅使用1系列数据创建饼图并以背景为圆

Question

好的，使用highcharts，我需要创建一个仅包含1个数据的饼图，其余的圆圈是一条无用的灰线。 反正有这样做吗？ 当前，使用以下代码，我必须设置一个数据点，使其包含百分比，但无法禁用此图片中的灰色部分：

但是我需要不能选择灰色部分，如果从灰色部分更薄的角度来看它看起来更像设计，那将有所帮助。 在这里设计：

该饼图的当前选项如下：

    {  
   "chart":{  
      "renderTo":"amenity-0",
      "plotBackgroundColor":null,
      "plotBorderWidth":0,
      "plotShadow":false,
      "height":220,
      "marginBottom":40,
      "spacingBottom":30
   },
   "title":{  
      "text":"Amenity 1",
      "align":"center",
      "verticalAlign":"bottom",
      "y":15
   },
   "credits":{  
      "enabled":false
   },
   "tooltip":{  
      "headerFormat":"",
      "pointFormat":"{point.name}: <b>{point.percentage:.1f}%</b>"
   },
   "plotOptions":{  
      "pie":{  
         "dataLabels":{  
            "enabled":true,
            "distance":-50,
            "style":{  
               "fontWeight":"bold",
               "color":"white"
            }
         },
         "startAngle":0,
         "endAngle":360,
         "center":[  
            "50%",
            "50%"
         ],
         "size":"100%"
      }
   },
   "series":[  
      {  
         "type":"pie",
         "name":"Amenity 1",
         "innerSize":"60%",
         "data":[  
            {  
               "name":"Amenity 1",
               "y":69,
               "color":"#C1AFBD",
               "dataLabels":{  
                  "enabled":false
               }
            },
            {  
               "name":"Gray Section",
               "y":31,
               "color":"#E9EDF0",
               "dataLabels":{  
                  "enabled":false
               }
            }
         ]
      }
   ]
}

我尝试使用pointFormatter函数代替pointFormat ，如果point.name ==='Gray Section'，则返回false，但这并没有删除工具提示。 它只是创建了一个空白的工具提示。 无论如何，我希望灰色部分像设计中一样薄一些，如果可能的话不要成为数据的一部分。

这可能吗？ 关于如何准确实现这一目标的任何想法？ 谢谢大家。

Answer 1

关于工具提示，您可以对一般的tooltip.formatter使用某种条件来禁用给定点的工具提示，例如为给定点设置noTooltip 。 例如（ JSFiddle ）：

tooltip: {
    formatter: function() {
        if(!this.point.noTooltip) {
            return '<span style="color:' + this.point.color + '">●</span>' + 
                this.series.name + '<br/>' + 
                'Value: ' + this.point.y + '<br/>';
        }

        return false;
    },
    hideDelay: 0
},
series: [{
    data: [{
        y: 70
    }, {
        y: 30,
        noTooltip: true
    }]
}]

对于较薄的灰色部分，您可以改用variablepie饼并设置不同的z值，以使实际值更加突出。 例如（ JSFiddle ）：

chart: {
    type: 'variablepie'
},
series: [{
    innerSize: '40%',
    zMin: 0,
    zMax: 100,
    data: [{
        y: 70,
        z: 10,
    }, {
        y: 30,
        z: 0.1,
        color: 'lightgray'
    }]
}]

它需要导入以下模块：

<script src="https://code.highcharts.com/modules/variable-pie.js"></script>