Google Диаграммы сложены колонны с различными примечаниями для каждой части колонны

Я надеюсь, что вы можете помочь мне с этим:Google Диаграммы сложены колонны с различными примечаниями для каждой части колонны

У меня есть график сложенных колонн, все из них с двумя значениями в стек в каждом столбце. Я успешно создал диаграмму, но мне нужно добавить аннотацию для каждого фрагмента каждого столбца (я не знаю его имени), указав процент от общего количества, представленного частью в своем столбце.

В приведенном ниже примере мне нужно будет установить аннотации, чтобы они отображали столбцы с колонтитулами, а для первого столбца должна быть аннотация в области «Хорошая» со значением «60%» и другая аннотация для «Плохая» область «40%» и т. д.

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

Заранее благодарю вас за помощь.

TL; DR: Мне нужны центрированные аннотации для каждой части каждого столбца.

<body> 
     <div id="chart" style="width: 900px; height: 500px; border: 1px solid black;"> 
     </div> 
    </body> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Date', 'Good', 'Bad'], 
      [Date(2013, 11, 1), 3, 2], 
      [Date(2013, 11, 2), 5, 3], 
      [Date(2013, 11, 3), 9, 2], 
      [Date(2013, 11, 4), 6, 3] 
     ]); 

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

     view.setColumns([{ 
      label: 'Date', 
      type: 'string', 
      calc: function (dt, row) { 
       var str = dt.getValue(row, 0); 
       return { v: str, f: str.toString('dd/MM/aaaa') }; 
      } 
     } 
      , { 
       label: 'Good', 
       type: 'number', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        return { v: good/(good + bad), f: good.toString() }; 
       } 
      }, { 
       label: 'Bad', 
       type: 'number', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        return { v: bad/(good + bad), f: bad.toString() }; 
       } 
      }, 
      { 
       role: 'annotation', 
       type: 'string', 
       calc: function (dt, row) { 
        var good = dt.getValue(row, 1); 
        var bad = dt.getValue(row, 2); 
        var perc = (bad/(good + bad)) * 100; 
        var ann = parseFloat(Math.round(perc).toFixed(2)) + "%"; 
        return { v: ann, f: ann.toString() }; 
       } 
      }]); 

     var options = { 
      title: 'Daily deeds', 
      isStacked: true, 
      vAxis: { format: '#.##%' } 
     }; 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
     chart.draw(view, options); 
    } 
</script>

источник

2014-01-16 user2888319

Вам нужно добавить еще один столбец аннотации после «Хорошо» колонки:

view.setColumns([{ 
    label: 'Date', 
    type: 'string', 
    calc: function (dt, row) { 
     var str = dt.getValue(row, 0); 
     return { v: str, f: str.toString('dd/MM/aaaa') }; 
    } 
}, { 
    label: 'Good', 
    type: 'number', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     return { v: good/(good + bad), f: good.toString() }; 
    } 
}, { 
    role: 'annotation', 
    type: 'string', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     var perc = (good/(good + bad)) * 100; 
     var ann = perc.toFixed(2) + "%"; 
     return ann; 
    } 
}, { 
    label: 'Bad', 
    type: 'number', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     return { v: bad/(good + bad), f: bad.toString() }; 
    } 
}, { 
    role: 'annotation', 
    type: 'string', 
    calc: function (dt, row) { 
     var good = dt.getValue(row, 1); 
     var bad = dt.getValue(row, 2); 
     var perc = (bad/(good + bad)) * 100; 
     var ann = perc.toFixed(2) + "%"; 
     return ann; 
    } 
}]);

источник

2014-01-16 22:54:45 asgallant

Я не могу поверить, что это так просто. Большое спасибо. – user2888319

Спасибо вам большое! –

Google Диаграммы сложены колонны с различными примечаниями для каждой части колонны

ответ

Смежные вопросы