2016-08-16 1 views
0

Есть ли способ включить несколько заголовков в мою диаграмму пончиков? Я использую c3.js создать диаграмму ниже:Добавление нескольких заголовков сделать C3.js диаграмму пончика

Donut Chart

Я хочу добавить еще одно поле в таблице, ниже «Дни» под названием Score.

Ниже приведен код:

var chart = c3.generate({ 
     data: { 
      columns:[ 
        ['First Part ', 54], 
        ['Second Part ', ' '+ 24], 
        ['Third Part ', ' ' + 22] 
      ], 
      type: 'donut', 
      colors: { 
       data1: '#ff0000', 
       data2: '#00ff00', 
       data3: '#0040ff' 
       },          
      }, 
      donut: { 
       expand: false, 
       title: 'Days 28' 
       //want to add 'Score' to the title so it appears on the line below "Days 28" 
      } 
}); 

Спасибо!

ответ

2

Этот титул в центре пончика относится к классу под названием c3-chart-arcs-title. Таким образом, вы можете просто добавить tspan к нему:

d3.select(".c3-chart-arcs-title") 
    .append("tspan") 
    .attr("dy", 16) 
    .attr("x", 0) 
    .text("Score"); 

Проверить эту скрипку: https://fiddle.jshell.net/0vuombw4/ (PS: это скрипка не мой, я просто использовал его, чтобы добавить дополнительный текст).

+1

В качестве другого примера можно привести следующее: http://plnkr.co/edit/ew5dDA1R3biXnMp80LDd?p=preview –

Смежные вопросы