API визуализации Google - процентные бары

Question

Я использую API-интерфейс API визуализации Google. Мне нужно сделать несколько вещей со следующим кодом:

1. Отображать проценты по дну. Если есть 213 общая, 81 должен показать 38%

http://jsfiddle.net/wesbos/EQ4kc/

google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ["dummy","Question 1", "Question 2", " Question 3"], 
     [0,81, 122, 10 ] 
    ]); 

    var options = { 
     title: '', 
     vAxis: { 
     title: '', 
     gridlines : { 
      count : 5, 
      color: 'white' 
     } 
     }, 
     hAxis: { 
     title: '', 
     format : '#%', 
     gridlines : { 
      count : 5, 
      color: 'white' 
     } 
     }, 
     colors: ['#be1e2d', '#74b749', '#0daed3', '#ffb400', '#f63131'], 
     legend : { 
     position: 'bottom' 
     } 
    }; 

    var chart = new google.visualization.BarChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 

Answer 1

Для того, чтобы сделать это, вы должны перевести свои данные в процентах. Вы можете использовать DataView справиться с этим:

var view = new google.visualization.DataView(data); 
view.setColumns([0, { 
    type: 'number', 
    label: data.getColumnLabel(1), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 1); 
     for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) { 
      total += dt.getValue(row, i); 
     } 
     var percent = val/total; 
     // what you do here depends on how you want to display the data in the tooltips 

     // option 1: use the value of the data point: 
     return {v: percent, f: dt.getFormattedValue(row, 1)}; 


     // option 2: use the percent: 
     return {v: percent, f: (percent * 100).toFixed(2) + '%'}; 
    } 
}, { 
    type: 'number', 
    label: data.getColumnLabel(2), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 2); 
     for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) { 
      total += dt.getValue(row, i); 
     } 
     var percent = val/total; 
     // what you do here depends on how you want to display the data in the tooltips 

     // option 1: use the value of the data point: 
     return {v: percent, f: dt.getFormattedValue(row, 2)}; 


     // option 2: use the percent: 
     return {v: percent, f: (percent * 100).toFixed(2) + '%'}; 
    } 
}, { 
    type: 'number', 
    label: data.getColumnLabel(3), 
    calc: function (dt, row) { 
     var val = dt.getValue(row, 3); 
     for (var i = 1, total = 0, cols = dt.getNumberOfColumns(); i < cols; i++) { 
      total += dt.getValue(row, i); 
     } 
     var percent = val/total; 
     // what you do here depends on how you want to display the data in the tooltips 

     // option 1: use the value of the data point: 
     return {v: percent, f: dt.getFormattedValue(row, 3)}; 


     // option 2: use the percent: 
     return {v: percent, f: (percent * 100).toFixed(2) + '%'}; 
    } 
}]); 

Вы рисуете диаграмму с точки зрения вместо данных:

chart.draw(view, options);