代码之家 › 专栏 › 技术社区 › Solomon Closson

如何创建只有1系列数据且背景为圆的饼图

pie-chart highcharts javascript

Solomon Closson · 技术社区 · 6 年前

好的,使用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=='灰色部分',则返回false,但这并没有删除工具提示。它只是创建了一个空白的工具提示。无论如何,我希望灰色部分像设计中那样更薄,如果可能的话,不会成为数据的一部分。

这有可能吗?关于如何实现这一点有什么想法吗?谢谢你们。

1 回复 | 直到 6 年前

Halvor Holsten Strand mtorres 6 年前

关于工具提示,您可以使用某种条件 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>