Question

我一直试图找到一个代码示例来解决多年但没有找到类似的东西。

我想要创建的是一个饼图，其下方有一个水平滚动条，用户可以擦洗它，改变年份。上面的饼图中的值将相应更改。优先在这些值之间制作动画。

更糟糕的情况是有一个长时间线动画，用户将使用底部的栏进行擦洗。虽然创建了饼图形状，但我仍然遇到了问题。它会像条形图那样简单，因为它只是需要改变的高度，但这不是一种选择。

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

http://kirill-poletaev.blogspot.co.uk/2011/02/creating-charts-using-as3-part-11.html

有没有人对如何实现我的目标有任何想法？

PS。此外，我将在发布时将flash项目转换为html5

由于

Answer 1

正如@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 ....

创建值随时间变化的交互式饼图

1 个答案: