Gesamtzählung in c3js Tooltip Titel

Question

Ich habe den folgenden Code in c3.js, um ein gestapeltes Balkendiagramm zu erstellen.

x=['a','b','c']; 
    var chart = c3.generate({ 
    data: { 

    columns: [ 
     ['data1', -30, 200, 200], 
     ['data2', 130, 100, -100], 

    ], 
    type: 'bar', 
    groups: [ 
     ['data1', 'data2'] 
    ] 
    }, 

    }); 

Ich frage mich, wie das Feature zu implementieren, um die Gesamtzahl in der Werkzeugspitze Titel zu zeigen, die here

Answer 1

Der einfachste Weg, dies zu tun wäre, einfach Ihren eigenen Tooltip HTML schreiben umgesetzt wurde. Sie können dies mit dem folgenden Code tun.

var chart = c3.generate({ 
    ....... 
    tooltip: { 
    contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
     return ...... Your HTML as a string here ....... 
    } 
    } 
}); 

Dann müssen Sie die Werte aller Punkte zusammenzufassen, die den gleichen Index wie die, die Sie über haben schwebte haben mit so etwas wie folgt aus:

var sum = 0; 
for (var i = 0; i < chart.data.targets.length; i++) { 
    sum += chart.data.targets[i].values[d[0].index].value; 
} 

ich ein fiddle erstellt haben, gibt ein Beispiel, wie es geht, und sollte tun, was Sie brauchen. Wichtig dabei ist, den Tooltip so zu gestalten, wie Sie es möchten, sonst ist er einfach. Ich habe auch die Funktion getrennt, um das HTML in eine andere Funktion zu erzeugen, um die Dinge sauber zu halten.