在x，y数值的最后一个数据点（散点图）上结束x轴

Question

当我使用ChartJS在散点图上绘制（x，y）浮点数据集时，由于步长的原因，我在x轴上最终有多余的空间。我可以强迫它在最后一个数据点结束吗？

我尚未设置任何精美的标签或图例，因此对基本情节感到抱歉。我首先尝试绘制线图，但我认为这不会出现此问题，但是我无法通过以下格式传递（x，y）值的数据集：

elevation = [
    {
        x: 1,
        y: 2
    },
    {
        x: 2,
        y: 5
    }
]

基于这个原因，我选择使用散点图。

目前，我正在按照以下方式绘制散点图：

var ctx = document.getElementById("elevationProfile");
myLineChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: "Elevation Profile",
            data: elevation,
            showLine: true
        }]
    }
});

但是我无法在文档或Github中找到任何指示如何实现此目标的东西。

我希望图形看起来像这样，结尾没有空格：

谢谢！

Answer 1

我在类似的项目中使用xAxe.ticks.min / max属性解决了这个问题。

在您的情况下，类似这样的事情应该可以解决：

if (elevation[0]){
    var minX = elevation[0]['x'];
    var maxX = elevation[elevation.length -1]['x'];
}

myLineChart = new Chart(ctx, {
  type: 'scatter',
  data: {
      datasets: [{
          label: "Elevation Profile",
          data: elevation,
          showLine: true
      }]
  },
  options: {
    ...
    scales: {
      xAxes: [{
        ticks:{
          min: minX,
          max: maxX,
        }
      }]
    },
    ...
  }
});