Google Chart gestapelt Spalten mit verschiedenen Anmerkungen für jedes Stück der Säule

Ich hoffe, dass Sie mir dabei helfen können:Google Chart gestapelt Spalten mit verschiedenen Anmerkungen für jedes Stück der Säule

Ich habe ein Diagramm von gestapelten Säulen, alle von ihnen mit zwei Werten in jeder Spalte zu stapeln. Ich habe erfolgreich das Diagramm erstellt, aber ich muss eine Anmerkung für jedes Stück jeder Spalte hinzufügen (ich kenne nicht den richtigen Namen dafür), die den Prozentsatz der Summe anzeigt, die durch das Stück in seiner eigenen Spalte dargestellt wird.

Im folgenden Beispiel müsste ich die Annotationen so einstellen, dass die gestapelten Spalten angezeigt werden und für die erste Spalte eine Anmerkung im Bereich "Gut" mit dem Wert "60%" und eine weitere Anmerkung für der "Bad" -Bereich von "40%" und so weiter.

Bis jetzt habe ich es geschafft, eine Anmerkung einzufügen, die den Prozentwert für den "Bad" -Bereich anzeigt, der an den Anfang jeder Spalte verschoben wird. Ich würde Hilfe brauchen, um die Anmerkung für jeden Bereich der Spalte richtig zu definieren und, hoffentlich, sie zentriert in seinem gegebenen Bereich zu setzen.

Vielen Dank im Voraus für Ihre Hilfe.

TL; DR: Ich brauche zentrierte Anmerkungen für jedes Stück jeder Spalte.

<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>

Quelle

2014-01-16 user2888319

Sie benötigen eine andere Anmerkung Spalte nach dem „Good“ Spalte hinzufügen:

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; 
    } 
}]);

Quelle

2014-01-16 22:54:45 asgallant

ich es so einfach nicht glauben kann. Vielen Dank. – user2888319

Vielen Dank !!! –

Google Chart gestapelt Spalten mit verschiedenen Anmerkungen für jedes Stück der Säule

Antwort

Verwandte Themen