0

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

4

2 回答 2

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/

于 2013-08-01T20:36:22.863 回答
1

请查看为甜甜圈图筹集的票

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

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

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

希望对你有帮助

谢谢——Digambar Sangavkar

于 2013-08-12T11:19:28.463 回答