javascript - 沿标签更改线条颜色 Chart.js

Question

我正在尝试更改沿 Y 轴和 X 轴的线条的颜色和粗细。我不知道我在文档中寻找什么，但现在已经在代码中将它们命名为行。

这条线叫什么，我应该给它起什么名字才能正常工作？

红色标记内的线我想保留但删除网格。

HTML

<canvas id="canvas-1"></canvas>

JS

  var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ['January','February','March','April','May','June','July'],
    datasets : [
      {
        label: 'My First dataset',
        labelColor : '#fff',
        fontColor : '#fff' ,
        backgroundColor : 'rgba(220,220,220,0.2)',
        borderColor : 'rgba(220,220,220,1)',
        pointBackgroundColor : 'rgba(220,220,220,1)',
        pointBorderColor : '#fff',
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }

  var options = {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      fontColor: "white",
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true,
          drawBorder: true,
          color: "green",
        },
        ticks: {
          fontColor: "white",
        },
      }],
      yAxes: [{
        stacked: true,
        gridLines: {
          display: true,
          drawBorder: true,
          color: "blue",
        },
        ticks: {
          fontColor: "white",
          beginAtZero: true,
        }
      }]
    }
  };
  var ctx = document.getElementById('canvas-1');
  var chart = new Chart(ctx, {
    type: 'line',
    data: lineChartData,
    options: options
  });

Answer 1

要更改线条的颜色和粗细(沿 x 和 y 轴)，请设置 color 和 lineWidth 属性分别用于两个轴 的 网格线，如下所示:

scales: {
   xAxes: [{
      gridLines: {
         display: false,
         color: 'green',
         lineWidth: 3
      },
      ...
   }],
   yAxes: [{
      gridLines: {
         display: false,
         color: '#07C',
         lineWidth: 3
      },
      ...
   }]
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

var randomScalingFactor = function() {
   return Math.round(Math.random() * 100)
};
var lineChartData = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
   datasets: [{
      label: 'My First dataset',
      labelColor: '#fff',
      fontColor: '#fff',
      backgroundColor: 'rgba(220,220,220,0.2)',
      borderColor: 'rgba(220,220,220,1)',
      pointBackgroundColor: 'rgba(220,220,220,1)',
      pointBorderColor: '#fff',
      data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
   }]
}

var options = {
   responsive: true,
   maintainAspectRatio: false,
   legend: {
      fontColor: "white",
   },
   scales: {
      xAxes: [{
         gridLines: {
            display: false,
            color: 'green',
            lineWidth: 3
         },
         ticks: {
            fontColor: "white",
         },
      }],
      yAxes: [{
         stacked: true,
         gridLines: {
            display: false,
            color: '#07C',
            lineWidth: 3
         },
         ticks: {
            fontColor: "white",
            beginAtZero: true,
         }
      }]
   }
};
var ctx = document.getElementById('canvas-1');
var chart = new Chart(ctx, {
   type: 'line',
   data: lineChartData,
   options: options
});

canvas { background: #222 }

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