reactjs - 如何删除折线图背景中的网格线?
问题描述
我正在开发一个 React JS 项目。在我的项目中,我需要创建折线图组件。我正在尝试将Chart JS 2库用于 React JS。但是,现在我在自定义折线图时遇到了一点问题。我想删除背景中的网格和线条(屏幕截图)以及图表顶部的标签(我的第一个数据集)。
这是我的代码。
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
fill: true,
lineTension: 0.1,
backgroundColor: '#edfce9',
borderColor: '#3DAA1D',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#3DAA1D',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#3DAA1D',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
showLine: true
}
]
};
<Line data={data} />
我怎样才能做到这一点?删除图表背景中的网格(线)并删除顶部的标签(我的第一个数据集)?
解决方案
请查看文档。您可以在选项中禁用网格线(您必须添加) https://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration
options: {
scales: {
yAxes: [
gridLines: {
display: false
}
],
xAxes: [
gridLines: {
display: false
}
]
},
legend: {
display: false
}
}
推荐阅读
- python - 从python内存中的MPEG(.ts)文件中提取音频,而不将MPEG写入文件
- react-native - 使用 react-native-svg-charts 如何在条形图中设置 x 轴和 y 轴值,而 y 轴与时间有关,x 轴与数字有关?
- python - Azure Blob 下载授权资源类型不匹配
- node.js - 对象不支持 SPFX Web 部件中的属性或方法“包含”
- ravendb4 - RavenDB4 数据订阅的特定端口
- r - 用ggplot在一个地块中有两个地块
- javascript - 控制台显示 ref 未定义 - 即使它应该满足条件也不满足
- javascript - 尝试使用 JavaScript 向网页添加按钮
- ruby - 如何 cgi 转义 ruby 凭据
- r - 在 R 中展平嵌套的 JSON