减少 Chart.js 中的 Y 轴

Question

我有一个图表可以正确输出信息，但它太高了。我查看了文档，但找不到使 Y 轴“更小”的方法。我的意思是改变它的计算方式 - 所以在这个屏幕截图中它增加了 10 秒。是否可以将其增加 20 秒？那么我有三个 Y 轴点？这会降低高度。

作为参考，Google Analytics 输出数据的方式是一个很好的方法。他们的图表漂亮而纤薄，为周围的其他内容腾出了空间。

Answer 1

您可以使用stepSizey-axis\xc2\xad 刻度的属性。通过将此属性设置为的值（间隔）20将减少 y 轴\xc2\xad的刻度数。

\n\n

scales: {\n   yAxes: [{\n      ticks: {\n         stepSize: 20\n      }\n   }]\n}\n

\n\n

\xe1\xb4\x85\xe1\xb4\x87\xe1\xb4\x8d\xe1\xb4\x8f

\n\n

\r\n

\r\n

scales: {\n   yAxes: [{\n      ticks: {\n         stepSize: 20\n      }\n   }]\n}\n

\r\n

var chart = new Chart(ctx, {\r\n   type: \'line\',\r\n   data: {\r\n      labels: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\'],\r\n      datasets: [{\r\n         label: \'LINE\',\r\n         data: [10, 30, 20, 50, 60],\r\n         backgroundColor: \'rgba(0, 119, 290, 0.2)\',\r\n         borderColor: \'rgba(0, 119, 290, 0.6)\',\r\n         fill: false\r\n      }]\r\n   },\r\n   options: {\r\n      scales: {\r\n         yAxes: [{\r\n            ticks: {\r\n               beginAtZero: true,\r\n               stepSize: 20 //<-- set this\r\n            }\r\n         }]\r\n      }\r\n   }\r\n});

\r\n

\r\n

\r\n

\n