带Chart.js的垂直网格线问题

Question

我正在使用图表.js库来创建折线图，由于需要大量标签，我使用Chartjs折线图上的限制标签数量问题中的方法跳过了一些标签，另见下文。

这是我用来创建这个图表的代码:

Chart.defaults.global.elements.point.radius = 2;

var ctx = document.getElementById("graph-1-met");

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: [0,'','','','','',1,'','','','','',2,'','','','','',3,'','','','','',4,'','','','','',5,'','','','','',6,'','','','','',7,'','','','','',8,'','','','','',9,'','','','','',10,'','','','','',11,'','','','','',12,'','','','','',13,'','','','','',14,'','','','','',15,'','','','',''],
        datasets: [
            {
                data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
                backgroundColor: "rgba(0,204,255,0.2)",
                borderColor: "rgba(0,204,255,1)",
                borderWidth: 2
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'Blowing Time (min)'
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Undissolved Lime (tonnes)'
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="graph-1-met"></canvas>

我想注意几件事：

> < li >如果我使用实际标签(例如< code>[0，1，2，3，4，...])黑线不会出现。这让我相信我使用空字符串(< code>'')时出了问题。 < li>

当我将标签更改为:< code>[0，1，''，''，...]黑线现在出现在第一次出现< code>''时。在这种情况下是第三标签位置。

为了解决这个问题，我尝试将网格线的颜色设置为白色，这导致黑线不再出现。不幸的是，这种解决方案使图表看起来更糟。

问：为什么会出现这条黑线，有没有办法删除它？

Answer 1

好吧，这可能很奇怪，但我刚刚从< code>labels数组中移除了每个< code>''，它就像它应该的那样呈现了。

jsfiddle

Chart.defaults.global.elements.point.radius = 2;

var ctx = document.getElementById("graph-1-met");

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [0, , , , , 1, , , , , , 2, , , , , , 3, , , , , , 4, , , , , , 5, , , , , , 6, , , , , , 7, , , , , , 8, , , , , , 9, , , , , , 10, , , , , , 11, , , , , , 12, , , , , , 13, , , , , , 14, , , , , , 15, , , , , ],
    datasets: [{
      data: [65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55, 65, 59, 80, 81, 56, 55],
      backgroundColor: "rgba(0,204,255,0.2)",
      borderColor: "rgba(0,204,255,1)",
      borderWidth: 2,
    }]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Blowing Time (min)'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Undissolved Lime (tonnes)'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="graph-1-met"></canvas>