如何使用圖表JS在垂直長條圖中設定y軸值
P粉729436537
2023-08-29 10:38:36
<p>在此垂直長條圖中，y 軸有正值、負值。 </p>
<p>我想根據零值上下使用正整數。 </p>
<p>我用的是4.2.1版</p>
<p>我該怎麼辦？ </p>
<p>垂直圖表範例</p>
<pre class="brush:php;toolbar:false;">var MONTHS = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
var color = Chart.helpers.color;
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Dataset 1",
backgroundColor: 'rgba(255, 201, 14, 1)',
borderColor: 'rgba(255, 201, 14, 1)',
borderWidth: 1,
data: [
10,
20,
30,
40,
50
],
},
{
label: "Dataset 2",
backgroundColor: 'rgba(255, 201, 14, 1)',
borderColor: 'rgba(255, 201, 14, 1)',
borderWidth: 1,
data: [
-100,
-200,
-300,
-400,
-500
],
},
],
};
var ctx = bloodPressureChart;
new Chart(ctx, {
type: "bar",
data: barChartData,
options: {
responsive: true,
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Bar Chart",
},
},
});</pre>
<p>這是我使用圖表 JS 的程式碼。 </p>
<p>我的程式碼圖表</p>
如果您只想更改y 軸標籤的文本，可以透過設定函數
options.scales.y.ticks.callback來完全更改它們，請參閱文件 和API 參考以了解詳細資訊。在您的情況下，要使負值讀為正值，您可以使用：callback: function(val){ return this.getLabelForValue(Math.abs(val)); }或
callback: function(val){ return this.getLabelForValue(val).replace(/^-/, ''); }