Chart.js 的垂直网格线问题

2022-01-22 00:00:00 javascript chart.js

我正在使用在第二个标签正常的位置出现一条随机黑线.

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

Chart.defaults.global.elements.point.radius = 2;var ctx = document.getElementById("graph-1-met");var myLineChart = new Chart(ctx, {类型:'线'，数据: {标签:[0,'','','','','',1,'','','','','',2,'','','','','',3,'','','','','',4,'','','','','',5,'','','','','',6,'','','','','',7,'','','','','',8,'','','','','',9,'','','','','',10,'','','','','',11,'','','','','',12,'','','','','',13,'','','','','',14,'','','','','',15,'','','','',''],数据集:[{数据:[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],背景颜色:rgba(0,204,255,0.2)"，边框颜色:rgba(0,204,255,1)"，边框宽度:2}]},选项: {传奇: {显示:假},秤:{x轴:[{刻度标签:{显示:真，labelString: '吹气时间(分钟)'}}],y轴:[{滴答声:{开始零:真},刻度标签:{显示:真，labelString: '未溶解的石灰(吨)'}}]}}});

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

我想说明几点:

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

问题:为什么会出现这条黑线，有什么办法可以去掉?

 解决方案 好的，这可能很奇怪，但我刚刚从  中删除了每个 ''标签 数组，它的渲染应该是这样的.
jsFiddle
Chart.defaults.global.elements.point.radius = 2;var ctx = document.getElementById("graph-1-met");var myLineChart = new Chart(ctx, {类型:'线'，数据: {标签: [0, , , , , 1, , , , , , 2, , , , , , 3, , , , , , 4, , , , , , 5, , , , , , 6, , , , ,, 7, , , , , , 8, , , , , , 9, , , , , , 10, , , , , , 11, , , , , , 12, , , , , , 13, , , , , ,14, , , , , , 15, , , , , ],数据集:[{数据:[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],背景颜色:rgba(0,204,255,0.2)"，边框颜色:rgba(0,204,255,1)"，边框宽度:2，}]},选项: {传奇: {显示:假},秤:{x轴:[{刻度标签:{显示:真，labelString: '吹气时间(分钟)'}}],y轴:[{滴答声:{beginAtZero: 真},刻度标签:{显示:真，labelString: '未溶解的石灰(吨)'}}]}}});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></脚本><canvas id="graph-1-met"></canvas>
I'm using the Chart.js library to create a line graph and due to the high number of labels needed I've skipped some using the method in the  Limit labels number on Chartjs line chart question, also see below.

My chart looks exactly how I want it to with one exception:

There is a random black line appearing where the second label would normal be.

This is the code I've used to create this chart:



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>





I'd like to note a few things:


If I use an actual label (e.g. [0,1,2,3,4,...]) the black line does not appear. Which leads me to believe something is going wrong with my use of empty strings ('').
When I change the label to: [0,1,'','',...] the black line now appears on the first occurrence of ''. In this case the 3rd label position.
In an attempt to fix the problem I tried setting the colour of the gridlines to white and this caused black line to no longer appeared. Unfortunately, this solution makes the graph look substantially worse.


Question: Why is this black line appearing and is there a way to remove it?
 解决方案 Ok, this might be weird, but I just removed every '' from the labels array and it renders like it should.

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>


	
		相关文章