在Raphael饼图中更新饼图切片大小 [英] Update pie slice size in Raphael pie chart

问题描述

我正在制作一张饼图，显示一段时间内的结果。因此，它需要在状态之间设置动画以显示不同切片的变化。我已经想出如何整体更改所有切片（使用此示例作为开始点），但我希望能够一次选择和管理特定切片（或Raphael称之为扇区）。有没有人想出怎么做？我发现如果var饼是我的饼图，那么我可以得到一个特定的切片：

I'm working on making a pie chart that shows results over time. As such it needs to animate between states to show how different slices change. I've figured out how to change all the slices en masse (using this example as a starting point), but I would like to be able to select and manage a particular slice (or sector as Raphael calls it) at a time. Has anyone figured out how to do that? I've found that if var pie is my pie chart, then I can get a particular slice with:

var pie = r.g.piechart(200, 200, 150, dataArray);
slice = pie.series[0];

但是当我尝试用动画（特别是改变它的大小）来改变切片时，失败（段不正确？）：

But when I attempt to change the slice with say, an animation (specifically to change its size), that fails (segment is not the right way?):

slice.animate({segment: [200, 200, 0, 100]}, 800);

任何操纵单个切片的见解都会非常有用。

Any insight into manipulating individual slices would be very helpful.

推荐答案

我很尴尬地意识到段属性是一个自定义属性，我在一个例子中创建并使用它来更新饼图切片的路径，从而更新它的大小。它看起来像这样：

I realized with much embarrassment that the segment attribute was a custom attribute created and used in an example I found to update the path of a pie slice, and therefore its size. It looks like this:

  var r = Raphael("holder");
  r.customAttributes.segment = function (x, y, r, a1, a2) {
      var flag = (a2 - a1) > 180,
          clr = (a2 - a1) / 360;
      a1 = (a1 % 360) * Math.PI / 180;
      a2 = (a2 % 360) * Math.PI / 180;
      return {
          path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
          fill: "hsb(" + clr + ", .75, .8)"
      };
  };

以下是上下文中的内容：我有三个值[10,20,15]假设一个宽度和高度为250的圆圈，我可以使用像这样的分段自定义属性用切片填充圆圈（假设我的页面上有一个div，ID为holder）：

Here's what this might look like in context: I have three values [10, 20, 15] that total to 45. Assuming a circle with a width and height of 250, I can populate the circle with slices using the segment custom attribute like this (assuming I have a div on my page with the id of holder):

var r = Raphael("holder");
r.customAttributes.segment = function (x, y, r, a1, a2) {
    var flag = (a2 - a1) > 180,
        clr = (a2 - a1) / 360;
    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;
    return {
        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]],
        fill: "hsb(" + clr + ", .75, .8)"
    };
};
points = [10, 20, 15];
total = 45;
start = 0;
paths = [];
for(i=0; i<=2; i++) {
  size = 360 / total * points[i];
  var slice = r.path();
  slice.attr({segment: [250, 250, 200, start, start + size], stroke: "#000", title: "Slice "+i});
  paths.push(slice);
  start += size;
}

然后我可以随时通过动画制作路径数组中切片的动画段属性：

I can then animate the slices in my paths array whenever I want, by animating the segment attribute:

newPoints = [5, 20, 20];
start = 0;
for(i=0; i<=2; i++) {
  size = 360 / total * newPoints[i];
  paths[i].animate({segment: [250, 250, 200, start, start + size]}, 800);
  paths[i].angle = start - size / 2;
  start += size;
}

我理解其中一些，其中一些我没有。但上面的代码将起作用（我检查过）。

Some of it I understand, some of it I don't. But the above code will work (I checked).

这篇关于在Raphael饼图中更新饼图切片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！