Question

我正在移动网站（m.sitename）上工作。客户期望使用dojo开发圆环图，这应该在Android手机和iPhone中正常工作。但我在互联网上找不到相同的工作示例。有人可以帮我理解如何使用dojo创建圆环图吗？

Answer 1

据我所知，dojox.charting中没有这种类型的图表。您可能必须编写自己的图表类型。看看dojox / charting / plot2d / Pie.js中的代码并将其用作模板。

您应该可以在馅饼中间添加一个填充圆圈，使其看起来像甜甜圈......

示例：

require([
    "dojo/_base/declare",
    "dojox/charting/Chart",
    "dojox/charting/plot2d/Pie",
    "dojox/charting/themes/Claro"], function (declare, Chart, Pie, theme) {

    var Donut = declare(Pie, {
        render: function (dim, offsets) {
            // Call the Pie's render method
            this.inherited(arguments);

            // Draw a white circle in the middle
           var rx = (dim.width - offsets.l - offsets.r) / 2,
               ry = (dim.height - offsets.t - offsets.b) / 2,
                r = Math.min(rx, ry) / 2;
           var circle = {
               cx: offsets.l + rx,
               cy: offsets.t + ry,
               r: r
           };
           var s = this.group;

           s.createCircle(circle).setFill("#fff").setStroke("#fff");
       }
   });

   // Create the chart within it's "holding" node
   var pieChart = new Chart("chartNode"),
       chartData = [{
          x: 1,
          y: 19021
       }, {
          x: 1,
          y: 12837
       }, {
          x: 1,
          y: 12378
       }, {
          x: 1,
          y: 21882
       }, {
          x: 1,
          y: 17654
       }, {
          x: 1,
          y: 15833
       }, {
          x: 1,
          y: 16122
       }];

   // Set the theme
   pieChart.setTheme(theme);

   // Add the only/default plot
   pieChart.addPlot("default", {
       type: Donut, // our Donut module reference as type value
       radius: 200,
       fontColor: "black",
       labelOffset: -20
   });

   // Add the series of data
   pieChart.addSeries("January", chartData);

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

});

在此处查看此行动：http://jsfiddle.net/psoares/XX7G9/

Answer 2

请查看为圆环图提出的门票

https://bugs.dojotoolkit.org/ticket/16803

我已经从我这边添加了一个解决方案，

未在移动设备上测试，但解决方案与饼图相同，我希望它能在移动设备上运行。

希望这会对你有所帮助

由于 - Digambar Sangavkar

如何在移动网站上使用dojo绘制圆环图

2 个答案: