如何僅使用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>