Reactjs 如何在 ChartJS 中操作 Y 轴

发布于02月28日

我需要在Y轴中显示从0、25%、50%、75%和100%值开始的数组中的最大值的标签.

我的示例最大值为100,000.Y轴上的输出应为:0、25,000、50,000、75,000、100,000,000. 不知道我应该放多大的步进码.对于max，我可以过滤数组中的max Amount.

yAxes: [
  {
    ticks: {
      min: 0,
      max: ???
      beginAtZero: true,
      stepSize: ???,
      callback(value) {
        return `Php ${formatHelper.kFormatter(value)}`;
      },
    },
  },
],

Y轴上的输出应为:0、25,000、50,000、75,000、100,000.

推荐答案

我们可以使用afterBuildTicks个选项来设置我们自己的时间刻度，

因此，我们首先从数据中筛选出最大值
在不同数组中设置最大值的百分比值
然后使用ticks数组的索引在afterBuildTicks选项中设置刻度

var data =  [90000, 50000, 30000, 14040, 45000, 36000];  //data
var max = Math.max.apply(Math, data);  //find max value   (90000 here)
var ticksArray = [0, (max*25)/100, (max*50)/100, (max*75)/100, max ];  //percentage values (0, 25%, 50%, 75%, 100%) for y-axis ticks

var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [
      "Tokyo",
      "Mumbai",
      "Mexico City",
      "Shanghai",
      "Sao Paulo",
      "New York",
      "Karachi",
      "Buenos Aires",
      "Delhi",
      "Moscow"
    ],
    datasets: [
      {
        label: "Series 1", 
        data: data,
      }
    ]
  },
  options: {
    responsive: true, 
    maintainAspectRatio: false,
    scales: {
      y: {
        max: 100000,
        min: 0,
        afterBuildTicks: scale => {   //this
          scale.ticks = [{
              value: ticksArray[0]    //use ticksArray here using index
            },{
             value: ticksArray[1]
            },
            {
              value: ticksArray[2]
            },
            {
              value: ticksArray[3]
            },
            {
              value: ticksArray[4]
            }
          ]
        }
      }
    }
  }
});

.container {
  width: 600px;
  height: 600px;
  margin: 0 auto;

}
  #myChart {
    width: 100%;
    height: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.0/chart.min.js"></script>
<div class="container">
  <canvas id="myChart"></canvas>
</div>