英文:
Is it possible to avoid giving labels entirely to a line graph from Chart JS
问题
我有一个 Chart JS 折线图，它应该从后端获取数据并在网页上显示。然而，图表有将近 1000 个要绘制的点，我不仅不能为所有这些点提供标签，而且在前端也无法适应这些标签。我想要避免完全提供标签属性。这是我现在的代码：
function Graphs() {
const data = {
labels: ['label1', 'label2', 'label3'], //我想避免提供这个
datasets: [{
label: "First dataset",
backgroundColor: "black",
data: [1, 2, 3] //这里将传递一千个值
}]
}
return (
<div><Line data={data} /></div>
)
}
到目前为止，我尝试使用下面给出的 options 属性隐藏 x 轴标签。
...
options: {
scales: {
x: {
display: false
}
}
}
这确实在前端删除了标签，但代码仍然要求我输入标签以显示数据。如果我像上面那样输入 3 个标签和 4 个数据点（data: [1,2,3,4]），它只显示前 3 个点，忽略其余的数据。
除此之外，我尝试传递一个空数组（labels: []），完全删除标签并传递一个空字符串而不是数组，但这三种方法都不显示任何数据。如果我传递一个字符串，它会切分字符串并将其字母用作标签。
在 options 属性中是否有我可以在这里使用的内容？如果我可以以某种方式显示所有 1000 个值的单个标签，那也可以。任何帮助将不胜感激。
英文:
I have a Chart JS linegraph that is supposed to take data from a backend and display it on a webpage. However, the chart has nearly 1000 points to plot and not only can i not provide labels for all of them, I cannot fit labels for them on the frontend either. I want to avoid giving the labels attribute entirely. This is what my code looks like right now
function Graphs() {
const data = {
labels: ['label1', 'label2', 'label3'],//I want to avoid giving this
datasets: [{
label: "First dataset",
backgroundColor: "black",
data: [1, 2, 3] //One thousand values will be passed here
}]
}
return (
<div><Line data={data}
/></div>
)
So far I have tried hiding the x-labels using the options attribute given below.
...
options:{
scales:{
x: {
display: false
}
}
}
This did remove the labels on the frontend, but the code still demands that I enter labels in order for it to show data. If I enter 3 labels as above and 4 data points ( data:[1,2,3,4]), it only displays the first 3 points and ignores the rest of the data.
Other than this, I tried passing an empty array (labels: []), completely removing the labels and passing an empty string instead of an array but all three of them do not show any data. If I pass a string, it splices the string and uses its letters as labels.
Is there something in the options attribute that I can use here? If I can somehow display a single label for all 1000 values. That will also work. Any help will be appreciated.
答案1
得分: 1
作为一种解决方法，您可以提供一个包含空字符串的标签数组：
labels:Array(3).fill('') // 3 表示数据数组的大小
此外，我建议您查看这个帖子，人们提出了不同的实现方式来跳过标签：https://github.com/chartjs/Chart.js/issues/12
英文:
As a workaround, you can provide a label array containing empty strings:
labels:Array(3).fill('') // 3 represents the size of the data array
In addition, I advise you to take a look at this thread, people proposed different implementation to skip the labels: https://github.com/chartjs/Chart.js/issues/12
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论