android - モバイル Web サイトで Dojo を使用してドーナツ チャートを描画する方法

Question

モバイル Web サイト (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/