如何解决如何在图表区域和图表线之间添加边距?
我正在使用图表js,并制作了折线图。我已经尝试了多种方法并仔细阅读了整个文档,但是找不到解决方法。 我尝试使用渐变在图表区域背景和线条之间带来一些空白。 我是否需要为此插件做一个插件?我需要在线条和图表区域背景之间添加空白或空白。
function App() {
var options = {
// layout: {
// padding: {
// left: 50,// right: 0,// // top: 100,// bottom: 100
// }
// },scales: {
xAxes: [
{
gridLines: {
drawOnChartArea: false,drawBorder: false
},ticks: {
display: false
}
}
],yAxes: [
{
gridLines: {
drawOnChartArea: false,ticks: {
display: false
}
}
]
},maintainAspectRatio: false,};
const data = canvas => {
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0,49,500);
// gradient.addColorStop(0.6,"white");
gradient.addColorStop(0.21,"rgba(226,240,251,1)");
gradient.addColorStop(0.54,"rgba(244,249,253,1)");
gradient.addColorStop(0.8,"rgba(251,254,1)");
return {
labels: ["January","February","march","April","May","June","July"],datasets: [
{
label: "My First dataset",lineTension: 0.5,fill:true,backgroundColor: gradient,borderColor: "#347aeb",borderCapStyle: "butt",borderDash: [],borderWidth: 5,borderDashOffset: 0.0,borderJoinStyle: "round",pointBorderColor: "#347AEB",pointBackgroundColor: "white",pointBorderWidth: 5,pointHoverRadius: 5,pointHoverBackgroundColor: "white",pointHoverBorderColor: "rgba(220,220,1)",pointHoverBorderWidth: 2,poinTradius: 10,pointHiTradius: 10,// showLine: 0,data: [65,59,80,81,56,55,40]
}
]
};
};
return (
<Line data={data} width={100} height={400} options={options}></Line>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。