javascript - 如何设置 g.raphaeljs 饼图方向或起点？

Question

默认情况下，g.raphaeljs 饼图显示从图表顶部沿两个方向平均拉伸的最大值，较小的值显示顺时针方向。

在下图中，最大值 (1) 从大约 7 点开始。我想显示从 12 点开始的最大值，该怎么做？

Answer 1

好的，找到它（并且 100% 有效）...在这里：添加 opts.startFromFixedAngle，因此第一个饼图切片将开始绘制...</a>

这是我刚刚做的一个工作 jsfiddle：g raphael pie，起始角度设置为 90

不要忘记使用新参数startFromFixedAngle

这是代码...

将以下内容应用于您的g.pie.js

代替

 angle = 0,

和

 angle = opts.startFromFixedAngle || 0,

消除

 var mangle = angle - 360 * values[i] / total / 2;
 if (!i) {
     angle = 90 - mangle;

添加

 var mangle;
 if (opts.startFromFixedAngle)
     mangle = angle + 360 * values[i] / total / 2;
 else {
     mangle = angle - 360 * values[i] / total / 2;
     if (!i) {
         angle = 90 - mangle;
         mangle = angle - 360 * values[i] / total / 2;
     }

Answer 2

上面的解决方案过于复杂，并且会破坏任何依赖于 mangle 的动画效果（例如在这里找到的：RaphaelJs Pie Chart Animation on Hover）。如果您想要的只是一个固定的起始角度，则单行更改就足够了，但是如果您想使用上述参数，您将替换

     if (!i) {
       angle = 90 - mangle;
       mangle = angle - 360 * values[i] / total / 2;
     }

和

     if (!i) {
       if (opts.startFromFixedAngle) {
         angle = opts.startFromFixedAngle;
       } else {
         angle = 90 - mangle;
       }
       mangle = angle - 360 * values[i] / total / 2;
     }

就我而言，我只是希望所有饼图都从 90 度标记开始，所以我只是从第一个块的代码中删除了“- mangle”。