Измените начало координат от нуля до одного в графе c3

Question

Я хочу изменить начало столбчатой ​​диаграммы c3 от нуля до единицы. Все значения должны быть взяты из одного, а не из нуля. Для лучшего понимания я добавил изображение.

Answer 1

Нет никакого конфигурационного/простого способа изменить исходное положение (0,0) на что-то другое (0,100).

Так чередовать/простой способ сделать это путем изменения оси клеща этикетки и ввод линий сетки и манипулирует значениями данных, как показано ниже: -

В примере ниже, я попытался переместить происхождение (ось х от 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"/>