2013-10-24 125 views
0

我已添加代码以从网格数据绘制饼图。我想在图表上添加参数的名称。我怎么能代表这一点。将标签添加到dojo饼图

我想绘制饼图区域与没有那个区域的人。我正在获取图表,但无法在图表中显示区域名称。我怎样才能做到这一点。

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

回答

1

我通过调整一系列功能像这样得到了答案:添加文字:fieldValue方法

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], **text: area**}; 
      }); 
     }