我试图在这个圆环图中垂直旋转标签文本的内圈方向。到目前为止还没有任何运气。有人能建议如何实现它吗?我正在使用chartjs-plugin-labels来显示切片中的标签。
我想实现这样的文本方向
hmtdttj41#
使用chartjs-plugin-datalabels可以实现如下:
options: { plugins: { datalabels: { anchor: "center", //start, center, end rotation: function(ctx) { const valuesBefore = ctx.dataset.data.slice(0, ctx.dataIndex).reduce((a, b) => a + b, 0); const sum = ctx.dataset.data.reduce((a, b) => a + b, 0); const rotation = ((valuesBefore + ctx.dataset.data[ctx.dataIndex] /2) /sum *360); return rotation < 180 ? rotation-90 : rotation+90; }, formatter: function (value, context) { return context.chart.data.labels[context.dataIndex]; }, }, }, }
Resulting piechart
cngwdvgl2#
我还创建了一个视频有关你的问题,我看到你也在youtube上发送消息。能够找到这个Stackoverflow后,因为你的消息不知何故从Youtube上消失。看到有关旋转计算的解释,因为它是相当棘手的youtube:https://youtu.be/M251H8RLr3Q请记住,旋转选项是可编写脚本的,因此您可以使用它创建一个函数来计算它。您已接近,但您需要使用datalabels插件中的旋转选项。以下是一些重要项目:Angular 的起点是90度,从那里开始你可以通过知道切片的百分比来计算。你将需要从360度Angular 来计算。最好是观看视频,了解更深层次的解释。
var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ['Big Commerce', 'CRM', 'ZOHO'], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], // == 360 450 (300 / 450) 66 == 120 + 90 // 120 / 3 = 40 / 2 = 20 // 100 = 80 = 40 backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], datalabels: { rotation: [210, 350, 50] } }, { label: 'My Second Dataset', data: [30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)', 'rgb(255, 205, 86)' ], datalabels: { // 30 = 360 = 8.33% // 90 = 25% // 90 = base // 30 / 2 = 15 // 90 + 15 = 105 // 90 + 30 + 30 // 90 + 30 + 15 = rotation: [105, 135, 165, 195, 225, 255, 285, 315, 345, 15, 45, 75] } }, { label: 'My Third Dataset', data: [10, 50, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], }] }, plugins: [ChartDataLabels], options: {} });
2条答案
按热度按时间hmtdttj41#
使用chartjs-plugin-datalabels可以实现如下:
Resulting piechart
cngwdvgl2#
我还创建了一个视频有关你的问题,我看到你也在youtube上发送消息。能够找到这个Stackoverflow后,因为你的消息不知何故从Youtube上消失。看到有关旋转计算的解释,因为它是相当棘手的youtube:https://youtu.be/M251H8RLr3Q
请记住,旋转选项是可编写脚本的,因此您可以使用它创建一个函数来计算它。
您已接近,但您需要使用datalabels插件中的旋转选项。
以下是一些重要项目:Angular 的起点是90度,从那里开始你可以通过知道切片的百分比来计算。你将需要从360度Angular 来计算。最好是观看视频,了解更深层次的解释。