pparya27 Ответов: 0

Chart.js значение оси y гистограммы должно быть установлено равным нулю при использовании двух наборов данных

Я использую Chart.js библиотека для создания диаграмм в моем проекте. Я хочу установить минимальное значение оси y равным нулю, но при этом второй набор данных начинается после окончания первого набора данных.

Что я уже пробовал:

Code 1:
<pre><html>
<head>
<script src="Chart.bundle.js"></script>
</head>

<body>

<div class="dvNWwise" style="width: 350px; height: 300px;">
	<canvas id="cvNWwise" style="width: 350px; height: 300px;"></canvas>
</div>

<script type="text/javascript">  
var ctx_cvNWwise = document.getElementById('cvNWwise').getContext('2d'); 
var chrt_cvNWwise = new Chart(ctx_cvNWwise, { 
type: 'bar', 
data: { 
	labels: ['NW-1','NW-2'], 
	datasets: [ 
		{label: 'Total TID', backgroundColor: '#B3E5FC', borderColor: '#03A9F4', borderWidth: 1, data: [12028,8885] }, 
		{label: 'Active TID', backgroundColor: '#CCFF90', borderColor: '#76FF03', borderWidth: 1, data: [8280,6090] }
	] }, 
options: { 
	responsive: true, legend: { position: 'bottom'}, 
	title: {display: true,text: 'Network wise Active Terminals (Total Terminals: 20913)'} 
 } 
 }); 
 </script>

</body>
</html>

Выход правильный, как этот-
Изображение 1

Код 2:
<html>
<head>
<script src="Chart.bundle.js"></script>
</head>

<body>

<div class="dvNWwise" style="width: 350px; height: 300px;">
	<canvas id="cvNWwise" style="width: 350px; height: 300px;"></canvas>
</div>

<script type="text/javascript">  
var ctx_cvNWwise = document.getElementById('cvNWwise').getContext('2d'); 
var chrt_cvNWwise = new Chart(ctx_cvNWwise, { 
type: 'bar', 
data: { 
	labels: ['NW-1','NW-2'], 
	datasets: [ 
		{label: 'Total TID', backgroundColor: '#B3E5FC', borderColor: '#03A9F4', borderWidth: 1, data: [12028,8885] }, 
		{label: 'Active TID', backgroundColor: '#CCFF90', borderColor: '#76FF03', borderWidth: 1, data: [8280,6090] }
	] }, 
options: { 
	responsive: true, legend: { position: 'bottom'}, 
	title: {display: true,text: 'Network wise Active Terminals (Total Terminals: 20913)'} ,
	scales:{ yAxes: [{display:true, stacked:true, ticks: {min: 0}} ] }
 } 
 }); 
 </script>

 </body>
</html>

В выходных данных второй набор данных искажается, второй набор данных начинается после первого набора данных.
Изображение 2


Мне нужна помощь со второй картой.

0 Ответов