Question

我试图想象存储在MySQL数据库中的投票结果。我在DB中有问题并回答这些问题，每个答案都有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>

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

无论我尝试什么，我都可以不动态对齐饼图，但无法显示不同的结果。

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

提前致谢。

Answer 1

我不确定这是不是你想要的。

我已经提出了一系列问题值

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"});

这不可能那么简单，可以吗？

这是example

使用raphaeljs的动态饼图数量

1 个答案: