Диаграммы C3 не хотят, чтобы на оси Y были обозначены цифры

Как вы можете видеть в выводе, я получаю десятичные значения по оси Y. Количество скачиваний не может быть 1,5.

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

Также при наведении указателя мыши на сетку я всегда получаю значение ноль 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
            }               
        });

введите описание изображения здесь

2 ответа

Просто отформатируйте галочки у, чтобы не отображать метки

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

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


Скрипка - http://jsfiddle.net/ovvywb5j/

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

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

Скрипка: http://jsfiddle.net/yymcjhgv/

Другие вопросы по тегам