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

【问题标题】：End x-axis on last data point (scatter plot) for x,y numeric values在 x,y 数值的最后一个数据点（散点图）上结束 x 轴
【发布时间】：2019-06-03 16:02:33
【问题描述】：

当我使用 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 中找到任何可以说明如何实现此目的的内容。

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

谢谢！

【问题讨论】：

标签： javascript chart.js

【解决方案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,
        }
      }]
    },
    ...
  }
});

【讨论】：