时间戳

首页 > 解决方案 > 在 chartjs 的顶部和底部边缘处减半的点

javascript - 在 chartjs 的顶部和底部边缘处减半的点

问题描述

在此处输入图像描述

如图所示，点在到达底部或顶部边缘时被切成两半（在此示例中，当数据为 1 或 5 时）。

我尝试了填充，添加了一些“假”数据以扩展 1 和 5 的限制，并使用刻度上的回调函数将其删除。没有按预期工作

这是我对此图表的配置。

const config = {
    type: 'line' as ChartType,
    data: data,
    options: {
      pointStyle: 'circle',
      //pointBackgroundColor: 'white',
      scales: {
        y: {
          ticks: {
            maxTicksLimit: 5,
            stepSize: 1,
          },
          min: 1,
          max: 5,
          reverse: true,
        },
      },
    },
  };

删除最小值和最大值会产生预期的输出。 在此处输入图像描述

但我需要最小值和最大值，因为我想要固定的 Y 轴值

任何线索如何解决这个问题？

标签： javascriptangulartypescriptconfigurationchart.js

解决方案

您可以使用afterDataLimits钩子设置比例的最大值和最小值，这样它仍然会溢出图表区域：

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [12, 19, 3, 10, 2, 3],
      borderColor: 'pink',
      backgroundColor: 'pink',
      radius: 10
    }]
  },
  options: {
    scales: {
      y: {
        afterDataLimits: (scale) => {
          scale.max = 10;
          scale.min = 0;
        }
      },
    },
  },
});
<canvas id="chart" width="250" height="120" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>

推荐阅读