在 c3 图中将原点从零更改为一

Question

我想将 c3 条形图的原点从零更改为 one.All 值必须取自一个而不是取自 zero.For 更好理解我附上了一张图片。

Answer 1

无法 config/easy 将原点从 (0,0) 更改为不同的值 (0,100)。

所以 alternate/easy 方法是通过更改轴刻度标签和放置网格线，并操纵数据值，如下所示：-

在下面的示例中，我尝试将原点（x-axis 从 0 移动到 100）

希望这对您有所帮助。

var chart = c3.generate({
  bindto:'#chart_example',
    data: {
        columns: [
            //['data1', 0, 200, -100, 400, 150, -250, 50, 100, 250] // Actual values
            ['data1', -100, 100, -200, 300, 50, -350, -50, 0, 150]   // actual values -100
        ],
        type: 'bar'
    },
    axis: {
        x: {
            type: 'category',
            categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9'],
            show: false,
        },
        y : {
            tick: {
                //format: d3.format("$,")
                format: function (d) { return "$" + (d+100); }
            }
        }
    },
    grid: {
        y: {
            lines: [
                {value: 0, text: ''},
            ]
        }
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.5/d3.min.js"></script>
<div id="chart_example"/>

在 c3 图中将原点从零更改为一

Change origin from zero to one in c3 graph

charts

d3.js

angularjs

c3.js