gpt4 book ai didi

javascript - 旋转具有两个数据点的 Chart.js 饼图,以在水平轴上对齐两个扇区

转载 作者:行者123 更新时间:2023-12-02 23:39:58 25 4
gpt4 key购买 nike

StackOverflow 上有一些答案,其中提供了如何使用 Chart.js 的固定值和 rotation 选项来旋转饼图的建议,但我还没有找到如何创建旋转公式考虑实际数据值并旋转图表,使其扇区始终在水平轴上对齐。

一个例子:

/image/JSrTR.png

(无法在此处嵌入图像;所以一直说它无法连接到 Imgur)。

是否有任何 Chart.js 选项可以对齐饼图扇区中心轴,还是我必须自己计算旋转?

例如,使用数据值[5,10],我可以使用公式rotation: 120/180 * Math.PI实现所需的旋转,但我不确定如何使公式适用于动态值。

最佳答案

好吧,看来我使用自定义公式是正确的。不确定,也许可以用更少的努力来完成:

var t1 = 5; // this will come from the server
var t2 = 10; // this will come from the server
var total = t1 + t2;

// Chart.js draws the first data point from vertical axis
// by default. But if set rotation to 0, it draws at 90 degrees from vertical axis
// (that is - on horizontal axis to the right side).
// Calculating the chart rotation, so that the first sector
// is always facing the left side and is middle-aligned
// on horizontal axis,
// thus the second sector also will be aligned to the right side.
var percentageOfT1 = t1 / total;
var sectorSizeDeg = 360.0 * percentageOfT1; // circle is 360 degrees
// thus we can calculate sector degrees easily using the percentage
var halfOffsetDeg = sectorSizeDeg / 2.0;

// rotate 180-halfsector
// to compensate for horizontal align and reach the middle line of the sector
var finalOffsetDeg = 180.0 - halfOffsetDeg;

...
// in Chart options:
rotation: finalOffsetDeg / 180.0 * Math.PI

关于javascript - 旋转具有两个数据点的 Chart.js 饼图,以在水平轴上对齐两个扇区,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56126037/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com