我正在使用图表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,
drawBorder: false
},
ticks: {
display: false
}
}
]
},
maintainAspectRatio: false,
};
const data = canvas => {
const ctx = canvas.getContext("2d");
const gradient = ctx.createLinearGradient(0, 49, 0, 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,253,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,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>
);
}