javascript - 如何使用 chartjs 将 x 轴值和线点移动到两条 x 轴线的中间？

Question

使用 chartjs，我设置了以下图表:

function myFunction(){
    var options = {
      type: 'line',
      data: {
        labels: ["1", "2", "3", "4", "5"],
        datasets: [
            {
                data: [26, 26, 29, 28, 29],
                borderWidth: 2,
                fill: false,
                lineTension: 0
            },              
            {
                data: [26, 26, 33, 28, 30],
                borderWidth: 2,
                fill: false,
                lineTension: 0,
            }
        ]
      },
      options: {
        scales: {
            yAxes: [{
            display: false,
            ticks: {
                suggestedMin: 0,
                beginAtZero: true   
            }
          }]
        }
      }
    }

    var ctx = document.getElementById('chartJSContainer').getContext('2d');
    new Chart(ctx, options);
}

我想将点和 x 轴数字向右移动，以便它们位于轴线之间。 (如:1 介于 1 和 2 之间；2 介于 2 和 3 之间；等等)见下文:

我该怎么做？

Answer 1

以下是您可以执行此操作的方法:

ꜰɪʀꜱᴛ

将默认图表类型设置为 bar ，如下所示:

var options = {
      type: 'bar',
      data: {
         ...

ꜱᴇᴄᴏɴᴅ

将第一个数据集的类型设置为line，这样:

...
datasets: [{
         type: 'line',
         data: [26, 26, 29, 28, 29],
         ...

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

function myFunction() {
   var options = {
      type: 'bar',
      data: {
         labels: ["1", "2", "3", "4", "5"],
         datasets: [{
            type: 'line',
            data: [26, 26, 29, 28, 29],
            borderColor: 'rgba(0, 119, 220, 1)',
            borderWidth: 2,
            fill: false,
            lineTension: 0
         }, {
            data: [26, 26, 33, 28, 30],
            borderWidth: 2
         }]
      },
      options: {
         scales: {
            yAxes: [{
               display: false,
               ticks: {
                  suggestedMin: 0,
                  beginAtZero: true
               }
            }]
         }
      }
   }

   var ctx = document.getElementById('chartJSContainer').getContext('2d');
   new Chart(ctx, options);
}

myFunction();

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