在chart.js中的yaxis上显示名称

debugcn 发表于 Dev

阿比舍克·阿加瓦尔

我正在使用chart.js来显示图表，我想在以数字表示的yaxis上显示名称。我使用标签数组更改了x轴点的坐标，但不知道如何更改y轴值。我添加了当前图表的屏幕截图，我想在yaxis上显示名称数组，就像我在x轴上显示标签

    [![this.barChart = new Chart('canvas', {
      type: 'line',
      data:{
       labels:\['a','b','c','d','e'\],
       
        datasets:\[
          {
            label:'My fist datasetr',
            data:\[1,3,5,22,11,15,4,7\],
            //backgroundColor:'red',
            borderColor:'red',
            fill:'false'
            
          }
        \]
      } ,
  });
  }][1]][1]

李·莱纳利

您可以传递Y标签，然后数据与Y标签匹配。

var options = {
  type: 'line',
  data: {
    xLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    yLabels: ['', 'Request Added', 'Request Viewed', 'Request Accepted', 'Request Solved', 'Solving Confirmed'],
    datasets: [{
      label: '# of Votes',
      data: ['', 'Request Added', 'Request Added', 'Request Added', 'Request Viewed', 'Request Viewed', 'Request Viewed'],
      borderWidth: 1,
      lineTension: 0
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'category',
        ticks: {
          reverse: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  background-color: #eee;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

您拥有的另一个选择是跟踪拥有的所有数字以及应该与之对应的标签字符串。然后在您的Y轴刻度配置回调中，您可以将获得的数字匹配到最接近的字符串并返回该字符串。

文档中添加美元符号的示例（https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats），但是您无需返回原始值，而需要返回字符串你想展示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。