Question

我正在使用Chart.js库创建折线图，由于需要大量标签，我已经使用Limit labels number on Chartjs line chart问题中的方法跳过了一些见下文。

我的图表看起来完全符合我的要求，只有一个例外：在第二个标签正常的地方出现一条随机的黑线。

这是我用来创建此图表的代码：

＆＃13;

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)'
                }
            }]
        }
    }
});

＆＃13;

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

＆＃13;

我想注意一些事情：

如果我使用实际标签（例如[0,1,2,3,4,...]），则黑线不会出现。这使我相信使用空字符串（''）会出现问题。
当我将标签更改为：[0,1,'','',...]时，黑线现在会出现在第一次出现的''上。在这种情况下，第三个标签位置。
为了解决问题，我尝试将网格线的颜色设置为白色，这导致黑线不再出现。不幸的是，这个解决方案使图表看起来更糟糕。

问题：为什么会出现这条黑线，是否有办法将其删除？

Answer 1

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

<强> jsFiddle

＆＃13;

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)'
        }
      }]
    }
  }
});

＆＃13;

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

＆＃13;

Chart.js的垂直网格线问题

1 个答案: