javascript - 如何使用chartjs仅显示偶数值的网格线？

Question

我第一次尝试chartjs，我想让网格线在偶数上变粗变灰，而且奇数网格线没有显示，所以只有20、40、60 ...将显示在研磨线上用较粗的灰线，如果这是有道理的，这就是我目前所拥有的，我试图在网格线选项上调用回调函数什么不起作用或者我使用错误：

    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: {
            display: true,
            min: 0,
            max: 100,
            fontSize: 7,
            // stepSize: 10,
            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,
            color: "#cac7c7"
          },
          pointLabels: {
            fontSize: 16,
            fontStyle: "bold"
          }
        }
      }
    });
  };

  render() {
    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>