c3js легенда рядом с каждым баром

Question

Я работаю над сложной гистограммой с c3js. Как я могу показать значения баров с легендой, постоянно находящейся рядом с каждой панелью? обычно они находятся только в подсказке.

Я приложил макет, чтобы показать вам, что я имею в виду:

То, что я до сих пор (see my jsfiddle for a working example):

var chart = c3.generate({ 
 
    bindto: '#chart', 
 
    data: { 
 
     columns: [ 
 
      ['data1', 30], 
 
      ['data2', 130], 
 
      ['data3', 230], 
 
      
 
      ['data4', 120], 
 
      ['data5', 50], 
 
      ['data6', 20], 
 
      
 
      ['data7', 30], 
 
      ['data8', 130], 
 
      ['data9', 230] 
 
     ], 
 
     type: 'bar', 
 
     groups: [ 
 
      ['data1', 'data2', 'data3'], 
 
      ['data4', 'data5', 'data6'], 
 
      ['data7', 'data8', 'data9'] 
 
     ] 
 
    }, 
 
    grid: { 
 
     y: { 
 
      lines: [{value:0}] 
 
     } 
 
    } 
 
});

Я счастлив за каждый вход/решение, чтобы решить мою проблему :)

Приветствия, Marco

Answer 1

Привет это возможно, но это не чистый c3.

Как я это делаю, используется d3.selectAll («c3-bar»), чтобы выбрать все элементы «пути», которые указывают наши бары.

Затем я хотел бы добавить код d3, чтобы вставить текстовый элемент на стороне каждого бара Что-то вроде

d3.selectAll(".c3-bars").insert("text").text(function(d){ 
console.info(d); 
return "123"; 
}).attr("x","0").attr("y","50").attr("font-size","13").attr("stroke","red"); 

отмечают, что это не HTE код, который делает именно то, что вам нужно, но это должно дать вы идете о том, куда идти

Обратите внимание, что вам нужно будет добавить этот код в .onrender() в определении диаграммы, чтобы он отображался каждый раз.

fiddle