두 축 잘못된 출발점이있는 Chart.js (음수 값인 경우)

Question

내 앱에 chart.js 차트가 있습니다. 이것은 음의 값없이 모습입니다 : 음의 값으로

:

당신은 내가 이중 axisY이 볼 수 있듯이. 음수 값이 없으면 필요에 따라 작동합니다. 그러나 어떤 것이 있으면 오른쪽 AxisY가 잘못된 위치에서 시작됩니다. AxisY와 같은 위치에서 시작하는 방법?

private buildOptions(): any { 
    return { 
     responsive: true, 
     title: { 
      display: false, 
      text: '' 
     }, 
     tooltips: { 
      mode: 'index', 
      intersect: true 
     }, 
     scales: { 
      yAxes: [{ 
       position: "left", 
       id: "y-axis-0", 
       fontColor: '#fff' 
      }, { 
       position: "right", 
       id: "y-axis-1", 
       fontColor: '#fff' 
      }] 
     }, 
     legend: { 
      display: true, 
      labels: { 
       fontColor: '#fff' 
      } 
     } 
    }; 
} 

감사합니다 :

여기 내 코드입니다.

Answer 1

두 축 모두 동일한 최소값 설정을 시도 했습니까?

당신은 그것을 지정하는 진드기를 사용할 수 있습니다 여기에

ticks: { 
      min: -5 
     } 

는 예를 들어 내가 당신을 위해 만들어 니펫 :

var ctx = document.getElementById("myChart").getContext('2d'); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
    datasets: [{ 
 
     label: '# of Votes', 
 
     data: [12, -5, 3, 5, 2, -3], 
 
     backgroundColor: [ 
 
     'rgba(255, 99, 132, 0.2)', 
 
     'rgba(54, 162, 235, 0.2)', 
 
     'rgba(255, 206, 86, 0.2)', 
 
     'rgba(75, 192, 192, 0.2)', 
 
     'rgba(153, 102, 255, 0.2)', 
 
     'rgba(255, 159, 64, 0.2)' 
 
     ], 
 
     borderColor: [ 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderWidth: 1 
 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
     position: "left", 
 
     id: "y-axis-0", 
 
     fontColor: '#fff', 
 
     ticks: { 
 
      min: -5 
 
     } 
 
     }, { 
 
     position: "right", 
 
     id: "y-axis-1", 
 
     fontColor: '#fff', 
 
     ticks: { 
 
      min: -5 
 
     } 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width:50%;"> 
 
    <canvas id="myChart" width="400" height="400"></canvas> 
 
</div>