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