차트 Js 음수 스케일

Question

음수 값으로 막대 차트 스케일을 시작해야하는데 2.7.0 버전에서 Chart Js를 사용하고 있습니다.

차트 -10

100 이미지 예에서 이동해야합니다

이 가능?

var canvas = document.getElementById('myChart'); 
 
var data = { 
 
    labels: ["Test"], 
 
    datasets: [ 
 
     { 
 
      label: "-10 to 100", 
 
      backgroundColor: "rgba(255,99,132,0.2)", 
 
      borderColor: "rgba(255,99,132,1)", 
 
      borderWidth: 2, 
 
      hoverBackgroundColor: "rgba(255,99,132,0.4)", 
 
      hoverBorderColor: "rgba(255,99,132,1)", 
 
      data: [100], 
 
     } 
 
    ] 
 
}; 
 
var option = { 
 
\t scales: { 
 
    \t yAxes:[{ 
 
    \t \t stacked:true, 
 
     gridLines: { 
 
     \t display:true, 
 
      color:"rgba(255,99,132,0.2)" 
 
     } 
 
    }], 
 
    xAxes:[{ 
 
    \t \t gridLines: { 
 
     \t display:false 
 
     } 
 
    }] 
 
    } 
 
}; 
 

 
var myBarChart = Chart.Bar(canvas,{ 
 
\t data:data, 
 
    options:option 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script> 
 
<canvas id="myChart" width="400" height="200"></canvas>

Jsfiddle :이 데모처럼 그렇게 할 수 RGraph (https://www.rgraph.net)를 사용하여 https://jsfiddle.net/LilNawe/Luaf2tm4/636/

Answer 1

는 않습니다 : 여기에

https://www.rgraph.net/demos/bar-offset-x-axis.html

해당 페이지의 코드입니다 :

012 3,516,

new RGraph.Bar({ 
    id: 'cvs', 
    data: [14,16,68,-9,-6,40,36], 
    options: { 
     labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], 
     unitsPost: '%', 
     shadow: false, 
     colors: ['red'], 
     strokestyle: 'rgba(0,0,0,0)', 
     textSize: 10, 
     title: 'A Bar chart with an offset X axis', 
     numyticks: 11, 
     gutterLeft: 50, 
     scaleZerostart: true, 
     ymin: -10, 
     ymax: 100, 
     backgroundGridVlines: false, 
     backgroundGridAutofitNumhlines: 11, 
     backgroundGridBorder: false, 
     ylabelsCount: 11 
    } 
}).draw(); 

Answer 2

안녕이 시도 할 수 있습니다 : 당신이 tick 속성에 객체를 전달하여 min 또는 max 값을 정의 할 수 있습니다. 내가 차트 JS를 사용하고 http://www.chartjs.org/docs/latest/axes/radial/linear.html#tick-options

var option = { 
    scales: { 
    yAxes:[{ 
      stacked:true, 
     gridLines: { 
      display:true, 
      color:"rgba(255,99,132,0.2)" 
     }, 
     ticks: { 
      suggestedMax: 100, 
      suggestedMin: -10 
     } 
    }], 
    xAxes:[{ 
      gridLines: { 
      display:false 
     } 
    }] 
    } 
};