Chartjs使网格线颜色和轴线颜色不同

Question

我是Chart.js的新手，我的项目要求将X轴水平线和Y轴垂直线设置为“ #ccc”颜色，而X轴水平网格线设置为颜色：“ ＃f2f2f2'。我的项目不需要垂直网格线。甚至可以吗？

这是我的小提琴：https://jsfiddle.net/souviksarkar86/ubghzsp9/7/

options: {
  responsive: true,
  maintainAspectRatio: true,
  title: {
    text: 'Demo graph',
    fontSize: 16,
    fontStyle: '100',
    fontColor: '#333333',
    padding: 10,
    display: true
  },
  legend: {
    display: false
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: false,
      },
      gridLines: {
        display: true,
        zeroLineColor: '#ccc',
        color: '#f2f2f2',
        lineWidth: 1
      }
    }],
    xAxes: [{
      ticks: {
        beginAtZero: false
      },
      display: false
    }]
  }      
}

我想使Y轴线的颜色不同于水平网格线的颜色。

Answer 1

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 ? 2.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,
    maintainAspectRatio: true,
    title: {
      text: 'Demo graph',
      fontSize: 16,
      fontStyle: '100',
      fontColor: '#333333',
      padding: 10,
      display: true
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false,
        },
        gridLines: {
          display: true,
          zeroLineColor: 'green',
          lineWidth: 1
        }
      }],
      xAxes: [{
        ticks: {
          beginAtZero: false
        },
        gridLines: {
          display: true,
          lineWidth: 1
        }
      }]
    }
  }
};


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

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<div style="width:75%;">
  <canvas id="canvas"></canvas>
</div>