Question

我正在使用ChartJS v 2.8.0

我正在使用以下数据，但没有显示“ 4.01”栏：

data:[9.24, 6.28, 5.65, 6.74, 4.01, 17.15, 4.01]

var options = {
  type: 'bar',
  data: {
    labels:["Jan", "Feb", "Mar", "Apr", "May", "June", "July"],
    datasets: [
	    {
	      label: '# of Votes',
	      data:[9.24, 6.28, 5.65, 6.74, 4.01, 17.15, 4.01],
      	borderWidth: 1
    	}
		]
  },
  options: {
  	scales: {
    	yAxes: [{
        ticks: {
					reverse: false
        }, 
      }],
    	xAxes: [{
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas { background-color : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="200"></canvas>
</body>

当我使用略有不同的数据时，它可以完美工作：

data:[9.24, 6.28, 5.65, 6.74, 4.01, 17.15, 3]

var options = {
  type: 'bar',
  data: {
    labels:["Jan", "Feb", "Mar", "Apr", "May", "June", "July"],
    datasets: [
	    {
	      label: '# of Votes',
	      data:[9.24, 6.28, 5.65, 6.74, 4.01, 17.15, 3],
      	borderWidth: 1
    	}
		]
  },
  options: {
  	scales: {
    	yAxes: [{
        ticks: {
					reverse: false
        }, 
      }],
    	xAxes: [{
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas { background-color : #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<body>
    <canvas id="chartJSContainer" width="600" height="300"></canvas>
</body>

我做错了什么，还是某种错误？如何解决？在这方面的任何帮助将不胜感激。

Answer 1

两个图表都需要在beginAtZero: true中使用yAxes.ticks，这将允许您指定比例从0开始。

var options = {
  type: 'bar',
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July"],
    datasets: [{
      label: '# of Votes',
      data: [9.24, 6.28, 5.65, 6.74, 4.01, 17.15, 3],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false,
          beginAtZero: true
        },
      }],
      xAxes: [{}]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="200"></canvas>
</body>

var options = {
  type: 'bar',
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July"],
    datasets: [{
      label: '# of Votes',
      data: [9.24, 6.28, 5.65, 6.74, 4.01, 17.15, 4.01],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false,
          beginAtZero: true
        },
      }],
      xAxes: [{}]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

<body>
  <canvas id="chartJSContainer" width="600" height="200"></canvas>
</body>

为什么ChartJS的条形图不呈现特定值的条形？

1 个答案: