如何调整图表js中点之间的间距？

Question

我正在尝试使用 Chart.js 制作折线图。但我面临一个问题。我想控制点之间的间距，但 Chart.js 使其相等。

这是我的代码：

<canvas id="myChart"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js" integrity="sha512-OD9Gn6cAUQezuljS6411uRFr84pkrCtw23Hl5TYzmGyD0YcunJIPSBDzrV8EeCiFxGWWvtJOfVo5pOgB++Jsag==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
var ctx = document.getElementById("myChart");

var points = [1,1,9,9.3];
var Dates = ["Dec 29th", "jan 10th", "Feb 21st", "Feb 25th"];

var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: Dates,
    datasets: [
      {
        label: "My chart",
        data: points,
        backgroundColor: "black",
        borderColor: "blue",
        borderWidth: 3,
        fill: false,
        lineTension: 0.4,
      }
    ]
  },
  
  options: {
    legend: {display: false},
    scales: {
      yAxes:[{
        ticks: {
            min:1,
            max: 9.9,
                  
            callback: function(value, index, values) {
                return '$' + value;
            }
        }
      }],
      
    },
     elements: {
        point:{
            radius: 0
        }
    }
  }
});
</script>

这是我的代码的结果：

但我想要中间的大空间，如下所示：

请问如何在第 3 点和第 4 点之间留出较大的空间？

Answer 1

你能在x轴上使用时间吗？

下面是一个例子

// "+" before (new Date(2021,11,29)) return miliseconds from 1970 year
const dataA = [ 
    {x:+new Date(2021,11,29), y:1},         // { x: 1640732400000, y: 1}, 
    {x:+new Date(2022,0,10), y:1},          // { x: 1641769200000, y: 1}, 
    {x:+new Date(2022,1,21), y:9},          // { x: 1645398000000, y: 9}, 
    {x:+new Date(2022,1,25), y:9.3},        // { x: 1645743600000, y: 9.3}
]; 

const cfgChart = {
    type: 'line',
    data: {
        datasets: [
            {
                backgroundColor: '#74adf7',
                borderColor: '#74adf7',
                data: dataA,
                label: 'A',
                lineTension: 0.4,
            },
        ],
    },
    options: {
        animation: false,
        parsing: false,
        interaction: {
            mode: 'index',
            axis: 'x',
            intersect: false,
        },
        scales: {
            x: {
                type: 'time',
            },
        },
    },
};

const chart = new Chart(document.querySelector('#chart').getContext('2d'), cfgChart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.3.1/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-luxon/1.1.0/chartjs-adapter-luxon.min.js"></script>

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