chart.js - Chart.js 显示 x 轴刻度，即使设置为 false

Question

新编码员并试图让 Chart.js 工作。

https://codepen.io/phillyg/pen/PojMQLp

 options: {
    responsive: true,
    legend: {
      display: false,
    },
    scales: {
      yAxes: [
        {
          ticks: {
            fontColor: "rgba(255, 255, 255, 1)",
          },
          gridLines: {
            display: false,
          },
        },
      ],
      xAxes: [
        {
          ticks: {
            fontColor: "rgba(255, 255, 255, 1)",
            display: false,
          },
          gridLines: {
            color: "rgba(255, 255, 255, .2)",
            borderDash: [5, 5],
            zeroLineColor: "rgba(255, 255, 255, .2)",
            zeroLineBorderDash: [5, 5],
          },
        },
      ],
    },
  },

我已将 options.scales[xAxes].ticks.display 设置为 false。

有什么帮助吗？

标签： chart.js

Answer 1

1. 你的拼写有问题..应该Axis不是Axes

2. 不需要方括号：xAxes: [

3. 我已经清理了多余的逗号——虽然它们不会“伤害”JS，但它们是不必要的。

const prices = [
  [1483315200000, 1019.1988000000001],
  [1483401600000, 1035.5313],
  [1483488000000, 1130.8495163207272],
  [1483574400000, 990.6674999999997],
  [1483660800000, 894.0325],
  [1483747200000, 900.0787999999999],
  [1483833600000, 908.0850000000004],
  [1483920000000, 901.8788880390637],

];

const labels = prices.map((el, i) => new Date(el[0]).toLocaleDateString());
const data = {
  labels: labels,
  datasets: [
    {
      data: prices.map((el) => el[1]),

      borderColor: "rgb(0, 0, 0)",
      pointBackgroundColor: "rgba(255, 255, 255, 1)",
    },
  ],
};

const config = {
  type: "line",
  data: data,
 options: {
    responsive: true,
    legend: {
      display: false,
    },
    scales: {
      yAxis: 
        {
          ticks: {
            fontColor: "rgba(255, 255, 255, 1)"
          },
          gridLines: {
            display: false
          },
        },

      xAxis: 
        {
          ticks: {
            display: false
          },
          gridLines: {
            color: "rgba(255, 255, 255, .2)",
            borderDash: [5, 5],
            zeroLineColor: "rgba(255, 255, 255, .2)",
            zeroLineBorderDash: [5, 5]
          }
        }
    }
  }
};

var myChart = new Chart(document.getElementById("myChart"), config);

    <div>
      <canvas id="myChart"></canvas>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
    <script src="chart_data.js" defer></script>