0

我正在尝试可视化存储在 MySQL 数据库中的投票结果。我在数据库中有问题和这些问题的答案，每个答案都有 5 个数值。在下面的列表中，Q 代表问题文本，数字是该问题的答案。

Q1 - 45,32,12,1,6
Q2 - 23,2,14,0,53
..
..
Q7 - ...

如果您考虑上面的场景，我需要在屏幕上显示 7 个不同的饼图。但是，问题的数量不是固定的，它们可能会增加或减少。在这种情况下，屏幕上的饼图数量也可能会增加或减少。

目前，我正在为饼图使用以下代码：

function displayChart() {

    var r = Raphael("holder");
    pie = r.piechart(100, 100, 70, [<?php echo($startValues) ?>], { legend: ["%%.% - 5 Stars","%%.% - 4 Stars","%%.% - 3 Stars","%%.% - 2 Stars","%%.% - 1 Star"], "colors":["#1a9641","#a6d96a","#d9ef8b","#fdae61","#d7191c"], legendpos: "east"});
    //blue-red colors ["#0571b0","#92c5de","#e7e7e7","#f4a582","#ca0020"]

    pie.each(function(){
        this.sector.scale(0, 0, this.cx, this.cy);
        this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 1000, "bounce");
    });

    pie.hover(function () {
        this.sector.stop();
        this.sector.scale(1.1, 1.1, this.cx, this.cy);

        if (this.label) {
            this.label[0].stop();
            this.label[0].attr({ r: 7.5 });
            this.label[1].attr({ "font-weight": 800 });
        }
    }, function () {
        this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 300, "bounce");

        if (this.label) {
            this.label[0].animate({ r: 5 }, 500, "bounce");
            this.label[1].attr({ "font-weight": 500 });
        }
    });
};

window.onload = function () {

    displayChart();

};

并将输出渲染到

<div id='holder' style='height:200px;'></div>

我可以在屏幕上动态显示问题（我的意思是我从数据库中获取的文本），但无法处理饼图。如果你能帮助我，我会很高兴。

无论我尝试什么，我都无法动态对齐饼图，也无法让它们显示不同的结果。

我也不确定如何将这些值传递给函数，不知何故标准定义不起作用。

提前致谢。

4

1 回答 1

0

我不确定这是否是你要找的。

我已经制作了一系列您的问题值

var vals = [
[ 1,2,3,4,5],  
[ 3,5,8,9,1],  
[ 10,100,150,20,70]  
];

然后根据它们在数组中的索引来偏移饼图。

pie = r.piechart(100, (200*loop)+100, 70, vals[loop], { legend: ["%%.% - 5 Stars","%%.% - 4 Stars","%%.% - 3 Stars","%%.% - 2 Stars","%%.% - 1 Star"], "colors":["#1a9641","#a6d96a","#d9ef8b","#fdae61","#d7191c"], legendpos: "east"});

不可能这么简单吧？

这是示例

于 2013-01-14T17:44:38.500 回答