I am using chartjs.org 2.2.1 and have a radar chart that has values between 1..5. I want to set the min value to 0 and max to 5 with a step of 1.
This seemed to be answered exactly here in this SO post. However my charts still have a weird scale and not the one that I have defined as per my code below.
Can anyone see what I am doing wrong here?
var options = {
responsive: false,
maintainAspectRatio: true
};
var dataLiteracy = {
labels: [
@PointLabel("Literacy", 1), @PointLabel("Literacy", 2), @PointLabel("Literacy", 3),
@PointLabel("Literacy", 4), @PointLabel("Literacy", 5)
],
datasets: [
{
label: "Literacy",
backgroundColor: "rgba(179,181,198,0.2)",
borderColor: "rgba(179,181,198,1)",
pointBackgroundColor: "rgba(179,181,198,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(179,181,198,1)",
data: [
@PointValue("Literacy", 1), @PointValue("Literacy", 2), @PointValue("Literacy", 3),
@PointValue("Literacy", 4), @PointValue("Literacy", 5)
]
}
]
};
var ctx = $("#chartLiteracy");
var myRadarChart = new Chart(ctx,
{
type: 'radar',
data: dataLiteracy,
options: options,
scaleOverride: true,
scaleSteps: 5,
scaleStepWidth: 1,
scaleStartValue: 0
});
答案 0 :(得分:31)
你是对的,但前提是你使用的是Chart.js v1.x 。
Ticks选项在 v2.x (您正在使用的那个)中发生了变化。
<小时/> 如果要编辑雷达刻度,则需要在图表选项中编辑ticks
属性:
var options = {
scale: {
ticks: {
// changes here
}
}
};
根据您的需要(从0到5的比例),您可以:
beginAtZero
设置为true,将max
设置为5 min
设置为0,将max
设置为5 您可以看到here结果。
答案 1 :(得分:0)
设置stepSize
scale: {
ticks: {
beginAtZero: true,
max: 5,
min: 0,
stepSize: 1
}
}
答案 2 :(得分:0)
从 ChartJS 3 开始,未在scale.ticks
中指定最小/最大比例值,但在scale
或scales[id]
对象中指定了最小/最大比例值,例如:
new Chart(hostElement, {
type: "radar",
data,
options: {
scale: {
min: 0,
max: 100,
},
},
});
https://www.chartjs.org/docs/latest/axes/radial/linear.html#linear-radial-axis:
scales。[x / y] Axes.ticks.max重命名为scales [id] .max
scales。[x / y] Axes.ticks.min重命名为scales [id] .min