在c3图中将原点从零更改为一 [英] Change origin from zero to one in c3 graph

问题描述

我想将c3条形图的原点从零更改为一.所有值必须从一而不是从零绘制.为了更好地理解，我已附加了图像.

I want to change the origin of the c3 bar graph from zero to one.All the values must be drawn from one not from zero.For better understanding i have attached an image.

推荐答案

没有配置/简便的方法可以将原点从(0,0)更改为其他值(0,100).

There is no config/easy way to change the origin from (0,0) to something different(0,100).

因此，另一种简便的方法是更改​​轴刻度标签并放置网格线，然后操作数据值，如下所示:-

So the alternate/easy way to do this is by changing the axis tick labels and putting grid lines, and manipulating the data values, as shown below:-

在下面的示例中，我尝试将原点(x轴从0移到100)

In below example, I have tried to move the origin(x-axis from 0 to 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图中将原点从零更改为一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！