C3js Штабелированная диаграмма с скрытым баром

Question

Сценарий: Мне нужно показать гистограмму о платежных реквизитах, сколько клиенты заплатили за продукт, используя Карту, чек или наличные деньги. А также необходимо отобразить общее значение в гистограмме с укладкой.

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Cash', 30, 200, 100, 400, 150, 250], 
      ['Card', 130, 100, 140, 200, 150, 50], 
      ['Total', 160,300,240,600,300,300] 
     ], 
     groups:[['Cash','Card']], 
     type: 'bar' 
    } 
}); 

Выход:

Мне нужно, чтобы показать общую стоимость, но не бар и легенды. Как это можно сделать? Любые советы будут полезны. Спасибо.

Answer 1

Вам не нужен полный набор данных, вы можете изменить содержимое всплывающих подсказок, чтобы вычислить его на лету (адаптировать технику, найденный в ответ здесь ->https://stackoverflow.com/a/36789099/368214)

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['Cash', 30, 200, 100, 400, 150, 250], 
      ['Card', 130, 100, 140, 200, 150, 50], 
     ], 
     groups:[['Cash','Card']], 
     type: 'bar' 
    }, 
    tooltip : { 
     contents: function (d, defaultTitleFormat, defaultValueFormat, color) { 
      var total = d.reduce (function(subTotal,b) { return subTotal + b.value; }, 0); 
      d.push ({value: total, id: "Total", name: "Total", x:d[0].x , index:d[0].index}); 
      return this.getTooltipContent(d, defaultTitleFormat, defaultValueFormat, color); 
     } 
    } 
}); 

Общая стоимость рассчитывается используя .reduce, чтобы суммировать все остальные значения в этой точке. Затем сделайте новую точку данных для всплывающей подсказки под названием «Total», используя это значение и передать его визуализатора по умолчанию для рисования (this.getTooltipContent)

http://jsfiddle.net/vz1rwvwn/