如何在图表区域和图表线之间添加边距？

问题描述

我正在使用图表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 (将#修改为@）