C3图表不希望在y轴上显示数字

时间:2015-07-29 14:32:56

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

正如你在输出中看到的那样,我在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
            }               
        });

enter image description here

2 个答案:

答案 0 :(得分:15)

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

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

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

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

答案 1 :(得分:1)

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

Raven.Server.exe -src 'D:\documents\RavenDB\RavenDB' -dest TestRavenDB -restore

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