chart.js 将数据点减半

Question

我有一张图表显示过去 7 天的网站访问量。在那里：

这是初始化：

varwebsitecalls_chart = new Chart(websitecalls_chartel, {
    type: 'line',
    data: {
        labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
        datasets: [{
            label: 'Websitecalls',
            data: [0, 0, 0, 0, 0, 0, 0],
            borderWidth: 2,
            borderColor: '#00000',
            backgroundColor: '#ffff',
            pointStyle: 'circle',
            pointRadius: 7,
            cubicInterpolationMode: 'monotone',
            tension: 0.4,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                display: false
            },
        },
        scales: {
            x: {
                grid: {
                    display: false,
                }
            },
            y: {
                min: 0,
                ticks: {
                    precision: 0,
                    font: {
                        family: 'Montserrat',
                    },
                },
                grid: {
                    borderDash: [5, 5],
                }
            },
        }
    },
});

问题：
问题是，当数据为 0 时，图表会切割圆圈，因为我将 min 设置为 0。我必须将 min 设置为 0，因为负的网站调用不存在。如果我不设置它，将显示-1。有没有办法解决这个设计技术问题？

提前致谢，
菲利普

Answer 1

不知道为什么，但定义 y.beginAtZero: true 而不是 y.min: 0 将解决问题。

请查看您修改后的可运行代码，看看它是如何工作的。

new Chart('websitecalls_chartel', {
  type: 'line',
  data: {
    labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"],
    datasets: [{
      label: 'Websitecalls',
      data: [0, 0, 0, 0, 0, 0, 0],
      borderWidth: 2,
      borderColor: '#00000',
      backgroundColor: '#ffff',
      pointStyle: 'circle',
      pointRadius: 7,
      cubicInterpolationMode: 'monotone',
      tension: 0.4,
    }]
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        grid: {
          display: false,
        }
      },
      y: {
        beginAtZero: true,
        ticks: {
          precision: 0,
          font: {
            family: 'Montserrat',
          },
        },
        grid: {
          borderDash: [5, 5],
        }
      },
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<canvas id="websitecalls_chartel" height="80"></canvas>

Chart.js documentation 状态...

beginAtZero: 如果 true，比例将包括 0（如果尚未包括）。
min：用户定义的比例最小值，覆盖数据中的最小值。

chart.js 将数据点减半

chart.js cuts data points to half

javascript

charts

chart.js