限制chart.js条形图上的labesl

时间:2018-07-17 06:39:40

标签: javascript css canvas charts chart.js

我将x-axis标签限制为5个,我使用了showXLabels: 5,但是它不起作用。我正在使用Chart.bundle.js version 2.7.2

代码

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
</head>
<body>
<canvas id="col_chart"></canvas>
<script>
var savingCanvas = document.getElementById("col_chart");
var savingData = {
  label: 'Data',
  backgroundColor: "rgba(51,204,255,1)",
  data: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]
};

var barChart = new Chart(savingCanvas, {
  type: 'bar',
  showXLabels: 5,
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
    datasets: [savingData]
  }
});
</script>
</body>

你们能帮我吗?

1 个答案:

答案 0 :(得分:0)

Kotlinnot documented。您在哪里找到此选项?

您使用Category X轴创建图表。这样,Chart.js只需呈现提供的标签和数据。限制为5的唯一方法是将showXLabels数组减少为5个元素。

Linear轴具有labels属性,但是此处不适用。