英文:
set stepSize for radar chart
问题
我已经使用了这个雷达图表（radar chart.js）。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
},
},
};
var ctx = document.getElementById('myChart');
var ChartData = {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 10, 21, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 36, 27, 10],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
var myRadar = new Chart(ctx, {
type: 'radar',
data: ChartData,
options: options
});
</script>
我想要为刻度设置步长（stepSize），所以我将它包含在 r 部分中。
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
ticks: {
stepSize: 20, // 步长的数值
},
},
},
};
但是它不起作用，会产生以下错误：
无法确定轴的类型。请提供 'axis' 或 'position' 选项。
你如何设置雷达图（radar chart）的步长（stepSize）取决于你使用的 Chart.js 版本。在 Chart.js 版本 4.2.1 中，设置步长需要使用正确的配置选项。请检查文档或更新到更高版本的 Chart.js，以查看如何正确设置步长。
英文:
I have used this radar chart.js
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
},
},
};
var ctx = document.getElementById('myChart');
var ChartData = {
labels: [
'Eating',
'Drinking',
'Sleeping',
'Designing',
'Coding',
'Cycling',
'Running'
],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 10, 21, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'My Second Dataset',
data: [28, 48, 40, 19, 36, 27, 10],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
};
var myRadar = new Chart(ctx, {
type: 'radar',
data: ChartData,
options: options
});
</script>
I want to set the stepSize for ticks, so I included this in r section
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
},
ticks: {
stepSize: 20, // the number of step
},
},
};
but it doesn't work and gives th fllowing error
> Cannot determine type of '' axis. Please provide 'axis' or
> 'position' option.
how can i set stepSize for radar chart v.4.2.1?
答案1
得分: 1
在代码中，"Ticks object should be inside r" 可以翻译为 "Ticks 对象应该位于 r 内部"。
英文:
Ticks object should be inside r
var options = {
elements: {
line: {
borderWidth: 3
}
},
scales: {
r: {
grid: {
lineWidth: 4
},
angleLines: {
lineWidth: 6
},
suggestedMin: 0,
suggestedMax: 100,
ticks: {
stepSize: 20
}
}
},
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论