reactjs 如何在ChartJS中操作Y轴

m2xkgtsf  于 2023-03-01  发布在  React
关注(0)|答案(2)|浏览(159)

我需要在Y轴上显示数组中最大值的标签,包括0、25%、50%、75%和100%的值。
我的示例最大值为100,000。Y轴的输出应为:0,25,000,50,000,75,000,100,000。不确定我应该在stepSize中放入什么。对于max,我可以过滤数组中的maxAmount。

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

Y轴输出应为:两万五五万七万五十万。

ubof19bj

ubof19bj1#

我们可以使用afterBuildTicks选项来设置我们自己的刻度,

  • 所以首先我们从数据中过滤出最大值
  • 设置不同数组中最大值的百分比值
  • 然后使用ticksArray in 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>
eblbsuwk

eblbsuwk2#

max设置为100000,将stepSize设置为25000

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

codepen exmaple

相关问题