c3类别刻度格式

时间:2016-06-16 14:13:48

标签: javascript c3.js

我有一个c3条形图类别。我想格式化类别标签,以便能够将其截断到一定长度。但我无法理解。

以下是图表定义:

var chart;
chart = c3.generate({
                    padding: {
                        top: 20,
                        bottom: 20

                    },
                    data: {

                        columns: [
                                  ["Listeners",4,2,0],
                                  ["Listens",4,2,0]],
                        type: 'bar',
                        groups:[["Listeners", "Listens"]]
                    },
                    axis: {
                        x: {
                            type: 'category',
                            categories: ["012345678890", "012345678890", "012345678890"],
                            
                        }
                    },
                    bar: {
                        width: {
                            ratio: 0.5 // this makes bar width 50% of length between ticks
                        }
                    },
                    legend: {
                        show: false
                    }
                });
<link href="https://raw.githubusercontent.com/c3js/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://raw.githubusercontent.com/c3js/c3/0.4.11/c3.js"></script>

<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>

我尝试添加它来格式化x轴定义中的刻度,但它抱怨图表未定义

  

tick:{format:function(x){return chart.categories()[x] .substring(0,10); }}

提前致谢!

2 个答案:

答案 0 :(得分:2)

当然,您只是声明没有值的变量var chart;,未定义。 尝试在函数c3.generate()之前创建图表配置,然后将配置作为参数传递。

var config = {
        padding : {
            top : 20,
            bottom : 20
        },
        data : {
            columns : [ [ "Listeners", 4, 2, 0 ], [ "Listens", 4, 2, 0 ] ],
            type : 'bar',
            groups : [ [ "Listeners", "Listens" ] ]
        },
        axis : {
            x : {
                type: 'category',
                categories: ["012345678890", "012345678890","012345678890"],
            }
        },
        bar : {
            width : {
                ratio : 0.5
            }
        },
        legend : {
            show : false
        }
    };

    config.axis.x.tick = {
        format : function(x) {
            return config.axis.x.categories[x].substring(0,10)
        }
    };

    var chart = c3.generate(config);

答案 1 :(得分:0)

在您的代码中,您已在x轴定义中命名了类别,我不确定您为什么不更改标签?

**示例**

&#13;
&#13;
var chart;
chart = c3.generate({
                    padding: {
                        top: 20,
                        bottom: 20

                    },
                    data: {

                        columns: [
                                  ["Listeners",4,2,0],
                                  ["Listens",4,2,0]],
                        type: 'bar',
                        groups:[["Listeners", "Listens"]]
                    },
                    axis: {
                        x: {
                            type: 'category',
                            _comment: "THIS IS WHERE YOU SET YOUR CATEGORY LABELS",
                            categories: ["Label1", "Label2", "Label3"],
                            
                        }
                    },
                    bar: {
                        width: {
                            ratio: 0.5 // this makes bar width 50% of length between ticks
                        }
                    },
                    legend: {
                        show: false
                    }
                });
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>

<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>
&#13;
&#13;
&#13;