Chart.js：如何增加多线图表中线条之间的差距？答案

【问题标题】：Chart.js: How do I increase the gap between lines in a multiline chart?Chart.js：如何增加多线图表中线条之间的差距？
【发布时间】：2023-01-20 04:15:43
【问题描述】：

我正在使用 Chart.js 库的 v 3.8，下面是代码：

function createLineGraph(chartObject,chartId,data,labels,xLabel,yLabel) {
    // Create a new Chart.js instance
    var ctx = document.getElementById(chartId).getContext('2d');
    chartObject = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: data
      },
  
      options: {
        responsive: true,
        scales: {
            x: {
              ticks:{
                  display: true,
                  autoSkip: true,
                  maxTicksLimit: 10,
              },
                title: {
                    display: true,
                    text: xLabel
                  },
                grid: {
                    display: false,
                    text: xLabel
                }
            },
            y: {
                  beginAtZero: true,
                  min: 0,
                  max: 200,
                  ticks: {
                    tickSpacing: 50,
                    autoSkip:true,
                  },
                  title: {
                      display: true,
                      text: yLabel
                    },
                  grid: {
                  display: false,                
              }
            }
          }
      }
    });
    chartObject.update();
  }

HTML

<canvas id="chart"></canvas>

现在它显示如下：

理想情况下，我看起来像这样：

【问题讨论】：

标签： javascript chart.js chart.js3

【解决方案1】：

我已经有一段时间没有使用 chart.js 了，但据我所知，这两个图表的高度是不同的，因此那里的线间距很窄。尝试尝试造型，这样你就可以增加高度，我认为差距也会增加。

【讨论】：