Как нарисовать диаграмму пончика, используя додзё на мобильном сайте

Question

Я работаю на мобильном сайте (m.sitename). Клиент ожидает, что диаграмма пончиков будет разработана с использованием dojo, которая должна хорошо работать на телефонах и iPhone Android. Но я не мог найти рабочий пример того же в Интернете. Может кто-нибудь, пожалуйста, помогите мне понять, как можно создать диаграмму пончика с помощью додзё?

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