Chart.js的垂直网格线问题 [英] Vertical Gird Line Issue with Chart.js

查看:205
本文介绍了Chart.js的垂直网格线问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



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



  Chart.defaults.global.elemen ts.point.radius = 2; var ctx = document.getElementById( graph-1-met); var myLineChart = new Chart(ctx,{type:'line',data:{标签:[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],backgroundColor: rgba(0,204,255,0.2),borderColor: rgba(0,204,255,1),borderWidth:2 }]},选项:{图例:{display:false},缩放比例:{xAxes:[{scaleLabel:{display:true,labelString:'Blowing Time(min)'}}},yAxes:[{ticks:{beginAtZero :true},scaleLabel:{display:true,labelString:'未溶解的石灰(色调)'}}]}}}));  

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

p>

我想说明几件事:





问题:为什么出现这条黑线?有办法删除它吗?

解决方案

好的,这可能很奇怪,但是我只是删除了每个< 标签数组中的strong> '' ,它呈现出应有的效果。



jsFiddle



  Chart.defaults.global.elements.point.radius = 2; var ctx = document.getElementById(  graph-1-met); var myLineChart = new Chart(ctx,{type:'line',data:{标签:[0,,,,,,1,,,,,,,,,,,,,, 3 、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、 10 、、、 ,,,,,,,,,,12,,,,,,,,,,、、、,,,,,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],backgroundColor: rgba(0,204,255,0.2), borderColor: rgba(0,204,255,1),borderWidth:2,}]},选项:{图例:{display:false},缩放比例:{xAxes:[{scaleLabel:{display:true,labelString:'Blowing Time( min)'}}],y轴:[{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'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的垂直网格线问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆