微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决如何在图表区域和图表线之间添加边距?

我正在使用图表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>

  );
}


I need to add a margin where I have pointed it out.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。