C3图表不希望y轴上的十进制数字答案

【问题标题】：C3 charts don't want decimal numbers in y axisC3图表不希望y轴上的十进制数字
【发布时间】：2015-07-29 14:32:55
【问题描述】：

正如您在输出中看到的那样，我在 y 轴上得到十进制值。这些是下载次数，不能是 1.5。

我尝试给出最小值但无法得到结果。

同样在网格中鼠标悬停时，我总是得到零值 0（在图像中高于微软）。我可以在那里放我的自定义文本吗？

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
            }               
        });

【问题讨论】：

标签： jquery d3.js charts bar-chart c3.js

【解决方案1】：

只需格式化 y 刻度以不显示标签

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

或者，您也可以遍历这些值，找到最大值并将 y 刻度值手动设置为整数或从 0 到 max+ 的整数倍数（请参阅 http://c3js.org/reference.html#axis-y-tick-value）

小提琴 - http://jsfiddle.net/ovvywb5j/

【讨论】：

【解决方案2】：

您只需要手动计算 Y 轴上的值。您还可以格式化工具提示的标题：

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

小提琴：http://jsfiddle.net/yymcjhgv/

【讨论】：