javascript - 如何使用 Chart.js 有条件地显示/隐藏 yAxis 上的网格线？

Question

我第一次使用 Chart.js，我使用的是雷达图，我希望 yAxis 线（从 0 到 100，步长为 10）将仅显示在偶数上并且也会改变网格线颜色为灰色和更厚，如果值是奇数，根本不显示网格线，这是我到目前为止得到的，我知道我必须使用回调来到达我瞄准的对象但是我无法访问它：

 buildChart = () => {
    const myChartRef = this.chartRef.current.getContext("2d");

    myLineChart = new Chart(myChartRef, {
      type: "radar",
      data: {
        labels: ["Fifa20", "CS:GO", "Dota 2", "LOL", "Overwatch", "Fortnite"],
        datasets: [
          {
            label: "Games",
            data: [40, 45, 53, 45, 100, 13],
            backgroundColor: [
              "transparent",
              "transparent",
              "transparent",
              "transparent",
              "transparent",
              "transparent"
            ],
            borderColor: [
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)",
              "rgba(203,166,255,1)"
            ],
            borderWidth: 5,
            pointBorderWidth: 0,
            pointBorderColor: "transparent"
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scale: {
          ticks: {
            min: 0,
            max: 100,
            fontSize: 7,
            callback: function(value, index, values) {
              switch (value) {
                case 20:
                  return value;
                case 40:
                  return value;
                case 60:
                  return value;
                case 80:
                  return value;
                case 100:
                  return value;
                default:
                  return "";
              }
            }
          },
          angleLines: {
            display: true
          },
          gridLines: {
            display: true,
            color: "#cac7c7",
            callback: function(value, index, values) {
              if (value % 2 === 0) {
               Chart.defaults.global.options.gridLines.display = false;
              }
            }
          },
          pointLabels: {
            fontSize: 16,
            fontStyle: "bold"
          }
        }
      }
    });
  };

  render() {
    console.log(Chart.defaults.global);
    return (
      <div style={{ height: "100%", width: "100%" }}>
        <canvas id="myChart" ref={this.chartRef} />
      </div>
    );
  }
}

标签： javascriptreactjschart.js

Answer 1

我不明白你为什么要使用回调来实现你正在寻找的东西。

为了只显示 20、40、60 等的网格线，您可以定义scale.ticks.stepSize: 20. 要使网格线更粗，scale.gridLines.lineWidth: 5例如定义。

new Chart(document.getElementById('myChart'), {
  type: "radar",
  data: {
    labels: ["Fifa20", "CS:GO", "Dota 2", "LOL", "Overwatch", "Fortnite"],
    datasets: [{
      label: "Games",
      data: [40, 45, 53, 45, 100, 13],
      backgroundColor: [
        "transparent",
        "transparent",
        "transparent",
        "transparent",
        "transparent",
        "transparent"
      ],
      borderColor: [
        "rgba(203,166,255,1)",
        "rgba(203,166,255,1)",
        "rgba(203,166,255,1)",
        "rgba(203,166,255,1)",
        "rgba(203,166,255,1)",
        "rgba(203,166,255,1)"
      ],
      borderWidth: 5,
      pointBorderWidth: 0,
      pointBorderColor: "transparent"
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scale: {
      ticks: {
        display: true,
        min: 0,
        max: 100,
        stepSize: 20,
        fontSize: 7,
        callback: function(value, index, values) {
          switch (value) {
            case 20:
              return value;
              break;
            case 40:
              return value;
              break;
            case 60:
              return value;
              break;
            case 80:
              return value;
              break;
            case 100:
              return value;
              break;
            default:
              return "";
          }
        }
      },
      angleLines: {
        display: true
      },
      gridLines: {
        display: true,
        lineWidth: 5,
        color: "#cac7c7"
      },
      pointLabels: {
        fontSize: 16,
        fontStyle: "bold"
      }
    }
  }
});

canvas {
  min-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>