2015-07-29 4 views
3

Как вы можете видеть на выходе, я получаю десятичные значения по оси y. Это количество загрузок, которые не могут быть равны 1.5.C3-диаграммы не хотят декамальных чисел по оси y

Я попытался дать минимальное значение, но не смог получить результат.

Также на мыши в сетке я всегда получаю нулевое значение 0 (над Microsoft на изображении). Могу ли я добавить свой текст?

function draw_tech_chart(){ 
     var chart = c3.generate({ 
      bindto: "#tech_chart", 
      data: { 
       columns: [['Microsoft', 5],['WebApplicationDevelopment', 2],['OpenSource', 2],['Content Management ', 2],['Open Source Middleware', 1],], 
       type : 'bar', 
       onclick: function (d, i) { console.log("onclick", d, i); }, 
       onmouseover: function (d, i) { console.log("onmouseover", d, i); }, 
       onmouseout: function (d, i) { console.log("onmouseout", d, i); } 
      },size: { 
       height: 250 
      }    
     }); 

enter image description here

ответ

13

Просто форматировать у клещей не отображать метки

var chart = c3.generate({ 
    bindto: "#tech_chart", 
    ... 
    axis: { 
     y: { 
      tick: { 
       format: function (d) { 
        return (parseInt(d) == d) ? d : null; 
       } 
      } 
     } 
    } 
}); 

В качестве альтернативы, вы можете также цикл по значениям, найти максимальную и установить значение у клеща вручную целые или целочисленные кратные от 0 до max + (см. http://c3js.org/reference.html#axis-y-tick-value)


Fiddle - http://jsfiddle.net/ovvywb5j/

1

Вам просто нужно вручную вычислить значения по оси Y. Можно также отформатировать заголовок всплывающей подсказки:

axis: { 
    y: { 
     tick : {values: [0,1,2,3,4,5]} 
    } 
}, tooltip: { 
    format: { 
     title: function (d) { return 'Custom text'; }, 
    } 
} 

Fiddle: http://jsfiddle.net/yymcjhgv/