Highcharts数据标签“标注”形状不适用于甜甜圈图 [英] Highcharts datalabel 'callout' shape not working for donut chart
问题描述
我一直在尝试使用Highcharts javascript库为甜甜圈图实现动态的标注形状数据标签，其中数据标签的缺口指向相应的弧线。
是这样的： https://imgur.com/yKhWKOu
I've been trying to implement dynamic 'callout' shape datalabels for donut chart using Highcharts javascript library, where notch of datalabels point to respective arc. something like this: https://imgur.com/yKhWKOu
我已经使用highcharts渲染器方法创建了标注形状，但无法使其动态化。这就是我现在要得到的： https://imgur.com/VMuVwdk
我代码是：
I've created the 'callout' shape using highcharts renderer method, but unable to make it dynamic. This is what I'm getting right now: https://imgur.com/VMuVwdk My code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
(function(Highcharts) {
Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h) {
var arrowLength = 6,
halfDistance = 6,
r = Math.min(0, w, h),
safeDistance = r + halfDistance,
<!-- anchorX = options && options.anchorX,
//anchorY = options && options.anchorY,
path;
path = [
'M', x + r, y, //
'L', x + w - r, y, // top side
'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
'L', x + w, y + h - r, // right side
'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner
'L', x + r, y + h, // bottom side
'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
'L', x, y + r, // left side
'C', x, y, x, y, x + r, y // top-right corner
];
path.splice(23,
3,
'L',
w / 2 + halfDistance,
y + h,
w / 2,
y + h + arrowLength,
w / 2 - halfDistance,
y + h,
x + r,
y + h
);
return path;
};
}(Highcharts));
Highcharts.chart('container', {
plotOptions: {
pie: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'white'
},
connectorWidth: 0,
distance: 10,
shape: 'callout',
backgroundColor: 'red',
<!-- backgroundColor: 'rgba(0, 0, 0, 0.75)', -->
style: {
color: '#FFFFFF',
textOutline: 'none'
}
},
startAngle: 0,
endAngle: 360,
center: ['50%', '50%']
}
},
series: [{
type: 'pie',
innerSize: '80%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Opera', 31.44]
]
}]
}, function(chart) {
});
</script>
</body>
</html>
先谢谢了
推荐答案
我检查了这个主题，似乎在Highcharts中要做这是一件相当棘手的事情。
I examined this subject and it seems that it's rather tricky thing to do in Highcharts.
该库使用了 SVGRenderer.label （ https：//api.highcharts .com / class-reference / Highcharts.SVGRenderer＃label ）函数来创建数据标签。
The library uses SVGRenderer.label (https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label) function for creating the data labels.
雪佛龙（小箭头）出现在<$ c $只有在定义了 xAnchor 和 yAnchor 并从中定义了必要条件时，c>标注形状标签满足 Highcharts.Renderer.prototype.symbols.callout 函数（ https://github.com/highcharts/highcharts/blob/master/js/parts/SvgRenderer.js ）。当为饼图系列生成数据标签时，这些值未定义-Chevron不会出现。
Chevron (small arrow) appears in callout shape label only when xAnchor and yAnchor are definded and necessary conditions from the Highcharts.Renderer.prototype.symbols.callout function are satisfied (https://github.com/highcharts/highcharts/blob/master/js/parts/SvgRenderer.js). When data labels are generated for pie series these values are not defined - chevron doesn't appear.
您已经覆盖了此功能，并对标签路径进行了硬编码-这不是解决方案
You have overwritten this function and hardcoded the label path - that's not the solution when you want it to be responsive.
这是我发现的解决方法：
我将 dataLabels.format 设置为空字符串-生成了标签，但是它们不可见，因为它们没有内容。我使用他们在 chart.events.render 中的位置来生成新标签：
I set dataLabels.format to empty string - the label are generated, but they're not visible, because they have no content. I use their position in chart.events.render to generate new labels:
render: function() {
var chart = this,
series = chart.series[0],
renderer = chart.renderer;
series.points.forEach(function(p) {
var dl = p.dataLabel,
x = dl.x + chart.plotLeft,
y = dl.y + chart.plotTop,
chartCenterX = chart.chartWidth / 2,
chartCenterY = chart.chartHeight / 2,
anchorX,
anchorY;
// destroy the old label
if (dl.customLabel) {
dl.customLabel.destroy();
}
// definitions for all the directions
if (x < chartCenterX && y < chartCenterY) { // right bottom corner chevron
anchorX = x + 30;
anchorY = y + 50;
} // more should be added here
// create custom label
dl.customLabel = renderer.label(p.name, x, y, 'callout', anchorX, anchorY).attr({
fill: 'blue'
}).css({
color: 'white'
}).add();
});
}
实时演示： http://jsfiddle.net/kkulig/8s968m7f/
这里最大的挑战是为锚点找到合适的坐标。我只是对绘图区域左上角的标签进行了此操作（仅出于示例目的-需要找到更好的公式）。我用图表的尺寸来计算这些值。
The biggest challenge here is to find a proper coordinates for anchors. I only did that for the label(s) in the top-left part of the plot area (it's just for example purposes - better formulas need to be found). I used the dimensions of the chart to compute these values.
这不是很优雅的解决方案，但是，如果您找到合适的公式并进行一些编码，它将可以正常工作。
It's not very elegant solution, but if you find proper formulas and do some coding it'll work.
这篇关于Highcharts数据标签“标注”形状不适用于甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
