ChartJS 如何删除折线图背景中的网格线？

yfjy0ee7 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(347)

我正在处理一个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} />

我该怎么做？删除图表背景中的网格（线）并删除顶部的标签（我的第一个数据集）？

chart.js

来源：https://stackoverflow.com/questions/65996737/how-can-i-remove-the-grid-line-in-the-background-of-the-line-chart

1条答案

按热度按时间

avwztpqn1#

请查看文档。您可以在选项中禁用网格线（您必须添加）https://www.chartjs.org/docs/2.9.4/axes/cartesian/#common-configuration

options: {
  scales: {
    yAxes: [
      gridLines: {
        display: false
      }
    ],
    xAxes: [
      gridLines: {
        display: false
      }
    ]
  },
  legend: {
    display: false
  }
}

版本3：

options: {
  scales: {
    x: {
      grid: {
        display: false      
      }
    },
    y: {
      grid: {
        display: false      
      }
    }
  }
}

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 如何删除折线图背景中的网格线？

1条答案

相关问题

热门标签

最新问答