无法在 Dojo 中绘制饼图

我正在尝试在道场中为 POC 绘制饼图。我画不出来。有人可以帮我解决问题吗？我用谷歌搜索了很多，但找不到确切的问题。

我能够绘制条形图，但看到饼图的问题。我正在将数据存储在 dojo 商店中并转换为系列并提供饼图，但最终什么也没看到。

如果有人帮助我解决问题，我将不胜感激。

以下是我的代码：

<script>
    var geoData = {
      identifier: 'Id',
      label: 'Id',
      items: [{
        Id: '1',
        Name: 'Africa',
        Age: 10,
        Gender: 'Male',
        Area: "Java",
        Experience: 1
      }, {
        Id: '2',
        Name: 'Asia1',
        Age: 45,
        Gender: 'Male',
        Area: "C",
        Experience: 3
      }, {
        Id: '3',
        Name: 'Asia2',
        Age: 35,
        Gender: 'Male',
        Area: "Java",
        Experience: 2
      }, {
        Id: '4',
        Name: 'Asia3',
        Age: 23,
        Gender: 'Male',
        Area: "C",
        Experience: 1
      }, {
        Id: '5',
        Name: 'Asia4',
        Age: 78,
        Gender: 'Male',
        Area: "Perl",
        Experience: 4
      }]
    };
    var layoutGeo = [
      [{
        field: "Id",
        name: "Id",
        width: 10
      }, {
        field: "Name",
        name: "Name",
        width: 10,
        editable: true
      }, {
        field: "Age",
        name: "Age",
        width: 10,
        editable: true
      }, {
        field: "Gender",
        name: "Gender",
        width: 10,
        editable: true,
        type: "dojox.grid.cells.Select",
        options: ["Male", "Female"]
      }, {
        field: "Area",
        name: "Area",
        width: 10,
        editable: true
      }, {
        field: "Experience",
        name: "Experience",
        width: 10,
        editable: true
      }]
    ];
    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
      });
      var series = makeseries(geoData);
      // Add the series of data
      pieChart.addSeries("Area", series);
      // Render the chart!
      pieChart.render();
    }
    function makeseries(data) {
      return [{
        datapoints: "items",
        field: "Id",
        name: "Id"
      }, {
        datapoints: "items",
        field: "Name",
        name: "Name"
      }, {
        datapoints: "items",
        field: "Area",
        name: "Area"
      }];
    }
    </script>

  </head>
  <body class="claro">
    <div data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props="data:geoData" data-dojo-id="geoStore" columnreordering="true"></div>
    <b>Set the population to assign to all items</b><br>
    <div id="grid" 
    data-dojo-type="dojox/grid/DataGrid"
    data-dojo-props="store:geoStore,
    structure:layoutGeo,
    query:{},
    queryOptions:{'deep':true},
    rowsPerPage:40">
  </div>
  <div display:inline-block>
    <div data-dojo-type="dijit/form/Button" data-dojo-id="Add">Add</div>
    <div data-dojo-type="dijit/form/Button" data-dojo-id="Remove">Remove</div>
  </div>
  <br>
  <div display:inline-block>
    <div id="chartDiv" style="width: 400px; height: 250px;"></div>
    <br>
    <div id="peiDiv" style="width: 400px; height: 250px;"></div>
  </div>
</body>
</html>

您的makeseries函数未以饼图可以使用的格式返回数据。请在此处查看文档中的示例。例如，如果您想绘制 geoData 年年龄的饼图，makeseries应如下所示：

function makeseries(data) {
    return data.items.map(function(d) {
        return {x: d['Id'], y: d['Age']};
    });
}

这是一个 jsfiddle 在原始代码的上下文中显示了这一点。看起来您还必须调整包含div 的饼图的大小。

相关内容

最新更新

热门标签：