这个问题已经有答案了:
ChartJs 2 How to remove numbers from the doughnut chart on loading(1个答案)
11天前关闭
我希望图表看起来如何:
它目前的样子:
组件代码:
function LineGraph() {
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
Title,
Tooltip,
Filler,
Legend
);
const data = {
labels: [10, 20, 30, 40, 50, 60, 70],
datasets: [
{
data: [50, 35, 45, 42, 70, 65, 100], // Add your data here
pointRadius: 0,
fill: 'origin', // This fills the area under the line
backgroundColor: (context: any) => {
const ctx = context.chart.ctx;
const gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0, "#EEECFE");
gradient.addColorStop(1, "#EEECFE80");
return gradient;
}, // Set the color you want
borderColor: '#A496FF', // Set the color of the line
tension: 0.5,
},
],
};
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false // This hides the legend
}
},
scales: {
x: { // Hides the x-axis labels
display: false,
ticks: {
display: false
}
},
y: { // Hides the y-axis labels
display: false,
min: 0,
ticks: {
display: false
}
},
},
};
return (
<div className="absolute bottom-0 px-[1.88rem] w-full h-[8.75rem]">
<Line data={data} options={options} />
</div>
);
}
目标:隐藏/删除线图上可见的标签,即我们看到的那些小数据标签(35,45,42等)。
我试过在options
下执行pointRadius: 0
和x: { ticks: { display: false } }
,但没有帮助。我很确定后者与线图上的标签无关。
1.我犯了什么错?
1.如何解决这一问题?
1条答案
按热度按时间3zwjbxry1#
@uminder指出的stack-overflow帖子解决了我的问题。看看他的链接,信息量更大。
正如@uminder所回答的,Chart.js默认情况下不绘制任何标签。我已经激活了一个名为
chartjs-plugin-datalabels
的全局插件,用于我的另一个需要标签的甜甜圈图表。在这里,我需要进行以下更改,以禁用该插件在此图中的工作: