c3jsでの総数ツールチップのタイトル

Question

c3.jsに次のコードがあり、積み重ねられた棒グラフが作成されています。

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

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

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

    }); 

私はこれを行う最も簡単な方法は、単に独自のツールチップのHTMLを書くことであろうhere

Answer 1

を実施してきたツールチップのタイトルで合計数を表示する機能を実装する方法を疑問に思いました。あなたは以下のコードでこれを行うことができます。

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

その後、あなたはこのような何かを超える推移しているものと同じインデックスを持つすべてのポイントの値を合計する必要があります。

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

私はそのfiddleを作成しましたそれを行う方法の例を示し、あなたが必要とするものを行うべきです。これを行うときに覚えておくべき重要なことは、あなたが望むようにツールヒントをスタイルすることです。そうでなければ、それは明白になります。私はまた、HTMLを生成して別の関数に入れて、物事をきちんと保つ機能を分離しました。