Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/378.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何创建只有1个系列数据且背景为圆形的饼图_Javascript_Highcharts_Pie Chart - Fatal编程技术网

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

Javascript 如何创建只有1个系列数据且背景为圆形的饼图,javascript,highcharts,pie-chart,Javascript,Highcharts,Pie Chart,好的,使用highcharts,我需要创建一个只有1个数据的饼图,圆圈的其余部分是一条没有任何作用的灰线。有办法做到这一点吗?目前,使用以下代码,我必须设置一个数据点,使其包含一个百分比,但无法禁用此图片中的灰色部分: 但我需要灰色部分不能被选中,如果它看起来更像设计,灰色部分更薄,这将有所帮助。此处设计: 此饼图的当前选项如下: { "chart":{ "renderTo":"amenity-0", "plotBackgroundColor":

好的,使用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
               }
            }
         ]
      }
   ]
}
{
“图表”:{
“renderTo”:“舒适度-0”,
“plotBackgroundColor”:空,
“plotBorderWidth”:0,
“plotShadow”:假,
“高度”:220,
“marginBottom”:40,
“间距底部”:30
},
“标题”:{
“正文”:“礼仪1”,
“对齐”:“居中”,
“垂直对齐”:“底部”,
“y”:15
},
“学分”:{
“已启用”:false
},
“工具提示”:{
“人头税”:“,
“点格式”:“{point.name}:{point.percentage:.1f}%”
},
“打印选项”:{
“馅饼”:{
“数据标签”:{
“启用”:正确,
“距离”:-50,
“风格”:{
“字体权重”:“粗体”,
“颜色”:“白色”
}
},
“startAngle”:0,
“端角”:360,
“中心”:[
"50%",
"50%"
],
“大小”:“100%”
}
},
“系列”:[
{  
“类型”:“馅饼”,
“名称”:“礼仪1”,
“内部尺寸”:“60%”,
“数据”:[
{  
“名称”:“礼仪1”,
“y”:69,
“颜色”:“C1AFBD”,
“数据标签”:{
“已启用”:false
}
},
{  
“名称”:“灰色部分”,
“y”:31,
“颜色”:“E9EDF0”,
“数据标签”:{
“已启用”:false
}
}
]
}
]
}
我尝试过使用
pointFormatter
函数而不是
pointFormat
,如果point.name=='Gray Section',则返回false,但这并没有删除工具提示。它只是创建了一个空白的工具提示。在任何情况下,我都希望灰色部分像设计中那样更薄,如果可能的话,不要成为数据的一部分


这可能吗?你有什么具体的想法吗?谢谢各位。

关于工具提示,您可以对常规
工具提示.格式化程序
使用某种条件来禁用给定点的工具提示,如为给定点设置
notoltip
。例如():

它需要导入以下模块:

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


不知道格式化程序选项。我想,只能使用
pointFormat
pointFormatter
选项。谢谢,我将尝试variablepie图表类型。如果可以将灰线居中,那就太好了。
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>