Chartjs更改網格線顏色

Question

首先我不知道它叫什麼。但是，你如何將它的顏色從灰色改爲白色？或者它甚至可能？

Answer 1

是可能的或者刪除網格線或具有它們以不同的顏色顯示。

在這兩個options.scales.xAxes和options.scales.yAxes您可以添加

gridLines: { 
    display: false , 
    color: "#FFFFFF" 
}, 

（很明顯，你不需要指定的顏色，如果你不disaplying他們）

var chartColors = { 
 
    red: 'rgb(255, 99, 132)', 
 
    orange: 'rgb(255, 159, 64)', 
 
    yellow: 'rgb(255, 205, 86)', 
 
    green: 'rgb(75, 192, 192)', 
 
    blue: 'rgb(54, 162, 235)', 
 
    purple: 'rgb(153, 102, 255)', 
 
    grey: 'rgb(231,233,237)' 
 
}; 
 

 
var randomScalingFactor = function() { 
 
    return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); 
 
} 
 
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
var config = { 
 
    type: 'line', 
 
    data: { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
     label: "My First dataset", 
 
     backgroundColor: chartColors.red, 
 
     borderColor: chartColors.red, 
 
     data: [ 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor() 
 
     ], 
 
     fill: false, 
 
    }, { 
 
     label: "My Second dataset", 
 
     fill: false, 
 
     backgroundColor: chartColors.blue, 
 
     borderColor: chartColors.blue, 
 
     data: [ 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor(), 
 
     randomScalingFactor() 
 
     ], 
 
    }] 
 
    }, 
 
    options: { 
 
    responsive: true, 
 
    title: { 
 
     display: true, 
 
     text: 'Chart.js Line Chart' 
 
    }, 
 
    tooltips: { 
 
     mode: 'label', 
 
    }, 
 
    hover: { 
 
     mode: 'nearest', 
 
     intersect: true 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
     display: true, 
 
     gridLines: { 
 
      display: false 
 
     }, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Month' 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     display: true, 
 
     gridLines: { 
 
      display: false 
 
     }, 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Value' 
 
     } 
 
     }] 
 
    } 
 
    } 
 
}; 
 

 

 
var ctx = document.getElementById("canvas").getContext("2d"); 
 
window.myLine = new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> 
 
<div style="width:100%;"> 
 
    <canvas id="canvas"></canvas> 
 
</div>