Создание круговой диаграммы для приложения

Question

Я разрабатываю приложение, которое требует круговой диаграммы для отображения установленного количества модулей. Модули должны быть интерактивными, отправляя значение в базу данных за сколько раз щелкнул модуль. Срезы изменят цвет и т. Д. В зависимости от этого значения базы данных. Срезы всегда будут равны по размеру.

Все просты.

Мой вопрос заключается в том, какую графическую систему вы бы использовали. Я смотрел диаграммы Google, но у меня нет способа зарегистрировать значение в срезе, не изменяя его «вес» в диаграмме. Поэтому в идеале я хотел бы добавить data-stage = "2" на каждый фрагмент, к которому я могу получить доступ с помощью настраиваемого метода.

Также диаграммы Google выглядят довольно тяжелыми для того, что мне нужно?

Любые советы были бы весьма полезными.

Джо

Answer 1

Вы можете использовать API визуализации круговых диаграмм Google и хранить метаданные о кликах в отдельной колонке в DataTable. Она будет работать что-то вроде этого:

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Value'); 
    data.addColumn('number', 'Number of clicks'); 

    data.addRows([ 
     ['Foo', 1, 0], 
     ['Bar', 1, 0], 
     ['Baz', 1, 0], 
     ['Bat', 1, 0], 
     ['Cad', 1, 0] 
    ]); 

    var columns = [0, { 
     type: 'number', 
     label: data.getColumnLabel(2), 
     calc: function (dt, row) { 
      // return the number of clicks as the formatted value of the pie slice 
      return {v: data.getValue(row, 1), f: data.getValue(row, 2).toString()}; 
     } 
    }]; 

    function setColors() { 
     var colors = [ 
      '#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', 
      '#0099c6', '#dd4477', '#66aa00', '#b82e2e', '#316395', 
      '#994499', '#22aa99', '#aaaa11', '#6633cc', '#e67300', 
      '#8b0707', '#651067', '#329262', '#5574a6', '#3b3eac', 
      '#b77322', '#16d620', '#b91383', '#f4359e', '#9c5935', 
      '#a9c413', '#2a778d', '#668d1c', '#bea413', '#0c5922' 
     ]; 
     options.colors = []; 
     for (var i = 0; i < data.getNumberOfRows(); i++) { 
      var clicks = data.getValue(i, 2); 
      if (clicks < colors.length) { 
       options.colors.push(colors[clicks]); 
      } 
      else { 
       options.colors.push(colors[colors.length - 1]); 
      } 
     } 
    } 

    var chart = new google.visualization.PieChart(document.querySelector('#chart_div')); 
    var options = { 
     height: 400, 
     width: 600, 
     pieSliceText: 'value' 
    }; 

    google.visualization.events.addListener(chart, 'select', function() { 
     var selection = chart.getSelection(); 
     if (selection.length > 0) { 
      var clicks = data.getValue(selection[0].row, 2); 
      clicks++; 
      data.setValue(selection[0].row, 2, clicks); 
      var view = new google.visualization.DataView(data); 
      view.setColumns(columns); 
      setColors(); 
      chart.draw(view, options); 
     } 
    }); 

    var view = new google.visualization.DataView(data); 
    view.setColumns(columns); 

    setColors(); 
    chart.draw(view, options); 
} 
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart}); 

смотри пример: http://jsfiddle.net/asgallant/8qdhC/