0

グリッド データから円グラフを描画するコードを追加しました。パラメータの名前をチャートに追加したい。どうすればこれを表すことができますか。

円グラフの面積とその面積を持つ人の数をプロットしたいと思います。チャートを取得していますが、チャートでエリア名を表すことができません。どうすればこれを達成できますか。

jsfiddle リンク: http://jsfiddle.net/rajeevprasanna/9wG3m/

//charts
        plotPieChart();
        function plotPieChart() {
            dojo.empty("peiDiv");

            // Create the chart within it's "holding" node
            var pieChart = new dojox.charting.Chart2D("peiDiv");

            // Set the theme
            pieChart.setTheme(dojox.charting.themes.Claro);

            // Add the only/default plot
            pieChart.addPlot("default", {
                type: "Pie",
                radius: 200,
                fontColor: "black",
                labelOffset: 20,
                labels: true 
            });
       new dojox.charting.action2d.Tooltip(pieChart,"default");
           new dojox.charting.action2d.MoveSlice(pieChart,"default");

            var series = makeseries(data);

            // Add the series of data
            pieChart.addSeries("Area vs Employees", series);

            // Render the chart!
            pieChart.render();

        }

     function makeseries(data) {
            var area_counts = {};
            for (var i = 0, ii = data.items.length; i<ii; i++) {
                var d = data.items[i],
                    area = d['Area'],
                    count = area_counts[area] || 0; 
                area_counts[area] = count + 1;
            }
            return Object.keys(area_counts).map(function(area) {
                return {x: area, y: area_counts[area]};
            });
        }


var data = {
    identifier: 'id',
    label: 'id',
    items: []
};

var data_list = [
        { "Name":"Africa", "Age": 10,  "Gender":"Male", "Area" : "Java", "Experience": 1},
        { "Name":"Asia1",  "Age": 45,  "Gender":"Male", "Area" : "Pel",      "Experience": 3},
        { "Name":"Asia2",  "Age": 35,  "Gender":"Male", "Area" : "Java", "Experience":2},
    { "Name":"Asia3",  "Age": 23,  "Gender":"Male", "Area" : "C",    "Experience":1},  
    { "Name":"Asia4",  "Age": 78,  "Gender":"Male", "Area" : "C++", "Experience":4}
];

var i, len;
for(i=0, len = data_list.length; i < len; ++i){
    data.items.push(dojo.mixin({'id': i + 1 }, data_list[i % len]));
}

var layout = [
    { field: "id", datatype:"number"}, 
    { field: "Name",       name: "Name",       width: 10, editable: true, datatype:"string" },
    { field: "Age",        name: "Age",        width: 10, editable: true, datatype:"number"  },
    { field: "Gender",     name: "Gender",     width: 10, editable: true, type: "dojox.grid.cells.Select", options: [ "Male", "Female"]}, 
    { field: "Area",       name: "Area",       width: 10, editable: true, datatype:"string"   },
    { field: "Experience", name: "Experience", width: 10, editable: true, datatype:"number"  }        
];

// In case you've close the filter bar, here's a way to bring it up.
function showFilterBar(){
    dijit.byId('grid').showFilterBar(true);
}
4

1 に答える 1