创建一个交互式饼图，其中值随时间变化

Creating an interactive Pie Chart where values change over time

本文关键字：变化 时间 交互式 一个 创建      更新时间：2023-09-26

我一直试图找到一个代码示例来工作，但找不到任何类似的。

我想创建的是一个饼状图，下面有一个水平滚动条，用户可以在上面滑动，改变年份。上面饼状图中的值将相应改变。最好在这些值之间动画。

最糟糕的情况是有一个很长的时间轴动画，用户将使用底部的工具条来浏览。但我仍然有创建皮耶哈特形状的问题。如果是柱状图的话会简单得多，因为它只需要改变高度，但这不是一个选项。

我找到的这段代码创建了一个饼状图，但我认为我不能改变时间轴不同帧的值。也许我做错了，但它抛出了一个错误。我找不到任何真正互动的例子。

http://kirill - poletaev.blogspot.co.uk/2011/02/creating图表-使用- as3部分- 11. - html

有没有人有任何想法，我如何才能实现我所追求的?

p。此外，当我发布flash项目时，我将把它转换为html5

谢谢

就像@vesper说的，放弃时间线，因为它只会带来痛苦。

关键是在多维array中定义数据，然后使用滚轮更新与array中的元素相关的索引。然后，您可以使用来自相应元素的数据重新绘制图表。

类似下面的内容(未经测试)应该为您提供一个坚实的起点。请注意，我提出了一个假设的滚轮，因此您需要更新代码的这些部分，以匹配您使用的滚轮的属性和事件。还请注意，您可以通过单击一系列按钮(多维array中的每个元素一个)来重新绘制图表，从而简化最初的问题。

// Set the default (or starting) index
var currentIndex = 0;
// Define your data as a multidimensional array
var myData:Array = [
    [{val:51,color:0x00CCFF,lab:"Internet Explorer"}, ...],
    [{val:41,color:0x00CCFF,lab:"Internet Explorer"}, ...],
    [{val:31,color:0x00CCFF,lab:"Internet Explorer"}, ...]
];
// Fictional scroller which I have imagined
var scroller:Scroller = new Scroller();
scroller.addEventListener('scrolled', scrollHandler);
// Handler for fictional scroller which I have imagined
function scrollHandler(event)
{
    // Get a number between 0 and the length of the data array
    var index = Math.floor((scroller.scrollX / scroller.scrollWidth) * (myData.length - 1));
    // Only react if the index has changed
    if (index != currentIndex)
    {
        currentIndex = index;
        draw(currentIndex);
    }
}
function draw(index) 
{
    // Draw the chart using data from the supplied index
    drawChart(200, 150, 100, myData[index]);
}
// Do the initial draw
draw(currentIndex);
// Your pie chart code ....
相关文章：