Chart.js 的垂直网格线问题-前端问题

Vertical Gird Line Issue with Chart.js(Chart.js 的垂直网格线问题)

本文介绍了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>





                        这篇关于Chart.js 的垂直网格线问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐