0

MySQL DB に保存されている投票の結果を視覚化しようとしています。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>

質問 (DB から取得したテキスト) を画面に動的に表示できますが、円グラフを処理できません。そのお手伝いができれば幸いです。

何を試しても、円グラフを動的に整列させることはできず、異なる結果を表示させることもできませんでした。

また、これらの値を関数に渡す方法もわかりません。どういうわけか、標準の定義が機能しませんでした。

前もって感謝します。

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 に答える