Question

我正在尝试在道场中为POC绘制饼图。我无法画画。有人可以帮助我找出问题所在。我google了很多但找不到确切的问题。

我可以绘制条形图，但看到饼图的问题。我将数据存储在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>

Answer 1

您的makeseries函数不会以饼图可以使用的格式返回数据。 Take a look at the example in the documentation here。例如，如果您想在geoData中绘制年龄的饼图，makeseries应该类似于以下内容：

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

Here's a jsfiddle在原始代码的上下文中显示。看起来你还必须调整包含div的饼图的大小。

无法在Dojo中绘制饼图

1 个答案: