1

jQuery Flot円グラフを作成しようとしましたが、「data」パラメーターを機能させることができません。合計で100(%)になる0..6の値があり、これらの値は、一度に1つのラベル値のペアで個別に追加する必要があります。

私が見たすべての例は、データ値がハードワイヤードであると想定していますが、残念ながら、それは現実の世界では機能しません。ラベルを作成する方法の実際の例が必要です。Flotが使用するデータペアです。

4

1 に答える 1

2

データがjsonオブジェクト表記になっているはずだと気づいたとき、ようやく機能しました。古い電球は薄暗いかもしれませんが、完全に消えているわけではありません。コードは次のとおりです。

function updatePieChart() {
    if ('#pieChart') {
        var total = 0;
        var data = new Array();
        var verb = "";
        var dataIndex = 0;
        var count = 0;

        for (var dataIndex = 0; dataIndex < 5; dataIndex++) {
            var duty = "DUTY_" + (dataIndex + 1);
            verb = getData(duty + "_SKILL");
            var d = getData(duty + "_PERCENTAGETIMESPENT");
            if (isNumeric(d)) {
                d = parseInt(d);
                if (d > 0) {
                    total += d;
                    if (verb == "") verb = duty + dataIndex;
                    var dataPoint = {
                        label: verb,
                        data: d
                    }
                    data[count++] = dataPoint;
                    log(dataPoint.label + ' = ' + dataPoint.data);
                }
            }
        }

        if (total != 100) {
            if (total < 100) {
                var missingDataNum = 100 - total;
                var dataPoint = {
                    label: '**MISSING**',
                    data: missingDataNum
                }
                data[count] = dataPoint;
                log(dataPoint.label + ' = ' + dataPoint.data);
            }
        }
        if ($.isFunction($.plot)) {
            log('Plot version: ' + $.plot.version);
            var pie = $.plot($('#pieChart'), data,
                {
                    series: {
                        pie: {
                            show: true,
                            label: {
                                show: true,
                                radius: 1,
                                formatter: function (label, series) {
                                    return '<div style="font-size:11px; text-align:center; padding:2px; color:black;">' + label + '<br />' + Math.round(series.percent) + '%</div>';
                                },
                                background: {
                                    opacity: 0.0
                                }
                            },
                            combine: {
                                color: '#999',
                                threshold: 0.05
                            }
                        }
                    },
                    legend: {
                        show: false,
                        labelFormatter: function (label, series) {
                            return '<b>' + label + '</b>';
                        }
                    }
                });
             }
        }
    }
}
于 2012-12-18T22:31:18.970 に答える