Chart.js垂直网格线问题

我使用Chart.js库创建折线图，并且由于需要大量标签，因此我使用Limit labels number on Chartjs line chart问题中的方法跳过了一些，另请参见下文。Chart.js垂直网格线问题

我的图表看起来正是我希望它有一个例外：没有出现在第二个标签将正常是一个随机的黑线。

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

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>

我想指出的几件事情：如果我使用

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

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

来源

2016-08-25 Paul Warnick

当您检查线路（开发工具）没有给出任何指示是什么引起的呢？类名，'data- *'，id等？ –

@ adam-beck，这是一个画布元素 –

@ adam-beck正如Mi-Creativity所说，整个元素是一个画布。不幸的是，Chart.js库在单个元素中构建整个图形，因此检查没有多大帮助。 –

好吧，这可能是不可思议，但我只是删除从labels阵列每''，它呈现像它应该。

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>

来源

2016-08-25 03:25:12

Chart.js垂直网格线问题

回答

相关问题