英文:
How to disable the legend in chart.js
问题
我遇到了 chartjs 的语法问题。我想做三件事：
- 将 responsive 设置为 false。
- 将 Y 轴刻度设置为最大值：9。
- 隐藏图例（legend）显示。
我已经成功设置了坐标轴并将 responsive 设为 false。然而，我无法移除图例。如果我尝试调整代码，可以再次移除图例，但这会禁用 responsive: false 和 Y 轴刻度的设置。如何才能同时实现这三个目标呢？感谢您提供的任何帮助！
以下是我的当前代码：
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Listening', 'Reading', 'Writing', 'Speaking', 'Overall'],
datasets: [{
{% for result in regular_test_1 %}
label: 'Band Score',
data: [{{ result["listening"] }}, {{ result["reading"] }}, {{ result["writing"] }}, {{ result["speaking"] }}, {{ result["overall"] }}],
{% endfor %}
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
max: 9,
min: 1,
beginAtZero: true,
plugins: {
legend: {
display: false
}
}
}
}
}
});
</script>
希望这能帮助你实现所需的效果！
英文:
I'm struggling with the syntax of chartjs. I want to do three things:
- Make responsive:false
- Set the Y axis scale to max: 9
- Make the legend display: false
I have managed to set the axis and make responsive: false. However, I can't remove the legend. If I play around with code, I can remove the legend again, however, this will disable responsive: false and the y axis scale. How can I make it so that all three of these things are achieved in the graph? Thanks for any help you can provide!
Here is my current code:
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Listening', 'Reading', 'Writing', 'Speaking', 'Overall'],
datasets: [{
{% for result in regular_test_1 %}
label: 'Band Score',
data: [{{ result["listening"] }}, {{ result["reading"] }}, {{ result["writing"] }}, {{ result["speaking"] }}, {{ result["overall"] }}],
{% endfor %}
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
max: 9,
min: 1,
beginAtZero: true,
plugins: {
legend: {
display: false
}
}
}
}
}
});
</script>
答案1
得分: 1
这是您提供的代码的翻译：
在您的代码中有一个错误，位于y{}的大括号中，这就是为什么它不起作用的原因。这是更新后的代码，请尝试：
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['听力', '阅读', '写作', '口语', '总体'],
datasets: [{
{% for result in regular_test_1 %}
label: '分数',
data: [{{ result["listening"] }}, {{ result["reading"] }}, {{ result["writing"] }}, {{ result["speaking"] }}, {{ result["overall"] }}],
{% endfor %}
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
max: 9,
min: 1,
beginAtZero: true,
}
},
plugins: {
legend: {
display: false
}
}
}
});
</script>
希望这对您有所帮助。
英文:
There is error in your code in brackets at y{}, that's why its not working. Here is the updated code. Try this:-
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Listening', 'Reading', 'Writing', 'Speaking', 'Overall'],
datasets: [{
{% for result in regular_test_1 %}
label: 'Band Score',
data: [{{ result["listening"] }}, {{ result["reading"] }}, {{ result["writing"] }}, {{ result["speaking"] }}, {{ result["overall"] }}],
{% endfor %}
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
max: 9,
min: 1,
beginAtZero: true,
}
},
plugins: {
legend: {
display: false
}
}
}
});
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论