javascript-如何在Y轴上显示一定数量的刻度?

前端之家收集整理的这篇文章主要介绍了javascript-如何在Y轴上显示一定数量的刻度? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一张图表,在该图表中我已经知道我需要的刻度数.有3个带有分组的条形图的图表.我正在努力解决这个问题.现在,它显示0到我的数据集中出现的任何数字,并根据需要自动缩放.

默认情况下,假设我使用数字进行缩放,但是在这种情况下,它是Y轴上的正,中性,负(字面上的标签),它们是与X轴上的特定日期相关的数据点(带有2个分组的条形图上午下午).

Chart.js文档似乎没有解释如何在跳动配置之外的数字上进行调整,而且我不确定如何进行调整.有什么想法吗?下面是到目前为止的代码.

屏幕快照示例我基本上通过选择4,8和12模拟了3个数据点.我希望这些标签为(负,正,中性)并使所有其他刻度消失.

  1. <canvas id="myChart" width="400" height="400"></canvas>
  2. <script>
  3. var ctx = document.getElementById('myChart').getContext('2d');
  4. var myChart = new Chart(ctx,{
  5. type: 'bar',data: {
  6. labels: ['Date/MoonCenter','Date/MoonCenter','Date/MoonCenter'],datasets: [{
  7. label: 'Dataset 1',backgroundColor: window.chartColors.red,stack: 'Stack 0',data: [4,12,4,8,4]
  8. },{
  9. label: 'Dataset 1',backgroundColor: window.chartColors.blue,stack: 'Stack 1',data: [8,12]
  10. }]
  11. },options: {
  12. scales: {
  13. yAxes: [{
  14. ticks: {
  15. beginAtZero: true
  16. }
  17. }]
  18. }
  19. }
  20. });
  21. </script>
最佳答案
您只需要在回调中添加回调,

  1. <canvas id="myChart" width="400" height="400"></canvas>
  2. <script src='Chart.js'></script>
  3. <script>
  4. var ctx = document.getElementById('myChart').getContext('2d');
  5. var myChart = new Chart(ctx,{
  6. type: 'bar',data: {
  7. labels: ['Date/MoonCenter',datasets: [{
  8. label: 'Dataset 1',4]
  9. },{
  10. label: 'Dataset 1',12]
  11. }]
  12. },options: {
  13. scales: {
  14. yAxes: [
  15. {
  16. ticks: {
  17. beginAtZero: true,callback: function (label,index,labels) {
  18. switch (label) {
  19. case 4:
  20. return 'negative';
  21. case 8:
  22. return 'positive';
  23. case 12:
  24. return 'neutral';
  25. }
  26. }
  27. }
  28. }
  29. ]
  30. }
  31. }
  32. });
  33. </script>

猜你在找的JavaScript相关文章