Chart.js-如何在折线图的X轴上制作比例间隔

Question

我正在使用Chart.js绘制具有6个点的折线图。这些要点是：

  x: 140,      y: null,
  x: 150.5,    y: 3500,
  x: 886.35,   y: 3500,
  x: 1617.2,   y: 0,
  x: 2348.05,  y: 0
  x: 2583,     y: null

正如人们所看到的，x0和x1（以及x4-x5）之间的间隔比x1-x2-x3-x4小得多。但是在图表上它们像是相等的一样被绘制：

我更希望x0和x1之间的间隔比x1和x2之间的间隔短得多。可以通过某种方式完成吗？

代码段：

var chart = new Chart(document.getElementById("myChart1"), {
  type: 'line',
  data: {
    labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
    datasets: [{
      label: 'My chart',
      spanGaps: true,
      lineTension: 0,
      data: [{
          x: 140,
          y: null
        },
        {
          x: 155.5,
          y: 3500
        },
        {
          x: 886.35,
          y: 3500
        },
        {
          x: 1617.2,
          y: 0
        },
        {
          x: 2348.05,
          y: 0
        },
        {
          x: 2583,
          y: null
        }
      ],
      fill: false,
      borderColor: '#4bc0c0'
    }]
  },
  options: {
    showXLabels: 30,
    legend: {
      display: false
    },
    tooltips: {
      enabled: true,
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true
        },
        ticks: {
          suggestedMin: 0,
          suggestedMax: 3700
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 10
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>

Answer 1

1. 只需将type: 'linear'添加到xAxes对象，就像这样：

   x个轴：[{     类型：“线性”，     scaleLabel：{...

2. 您的第一个点有y:null，并且不会包含在图表中。我将其更改为x:140,y:0。

try{
var chart = new Chart(document.getElementById("my_chart"), {
  type: 'line',
  data: {
    labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
    datasets: [{
      label: 'My chart',
      spanGaps: false,
      lineTension: 0,
      data: [{
          x: 140,
          y: 0
        },
        {
          x: 155.5,
          y: 3500
        },
        {
          x: 886.35,
          y: 3500
        },
        {
          x: 1617.2,
          y: 0
        },
        {
          x: 2348.05,
          y: 0
        },
        {
          x: 2583,
          y: null
        }
      ],
      fill: false,
      borderColor: '#4bc0c0'
    }]
  },
  options: {
    showXLabels: 30,
    legend: {
      display: false
    },
    tooltips: {
      enabled: true,
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true
        },
        ticks: {
          suggestedMin: 0,
          suggestedMax: 3700
        }
      }],
      xAxes: [{
      type: 'linear', /* <--- this */
      scaleLabel: {
          display: true,
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 10
        }
      }]
    }
  }
});
}catch(e){}

body { m1argin-bottom: -30px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my_chart"></canvas>