我正在使用 chartjs.org 2.2.1 并且有一个雷达图,其值介于 1..5 之间。我想将最小值设置为 0,将最大值设置为 5,步长为 1。
这似乎在这个 SO post 中得到了准确的回答.然而,我的图表仍然有一个奇怪的比例,而不是我根据下面的代码定义的比例。
谁能看出我在这里做错了什么?
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
});
最佳答案
你是对的,但前提是你使用的是 Chart.js v1.x。
刻度选项在 v2.x(您正在使用的那个)中发生了变化。
如果您想编辑雷达刻度,您需要在图表选项中编辑
ticks
属性:
var options = {
scale: {
ticks: {
// changes here
}
}
};
根据您的需要(从 0 到 5 的比例),您可以:
- 将属性
beginAtZero
设置为 true 并将max
设置为 5 - 将属性
min
设置为 0,将max
设置为 5
可以看到here结果。
关于javascript - 在雷达 chart.js 中设置最小值、最大值和步数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39249722/