Question

我想在散点图中在极值点和轴之间的数据点周围留一点空间。

Chart.js documentation列出了所谓的常见offset属性，听起来像我想要的一样，但它似乎仅适用于水平标记轴（摘要的上半部分）。对于散点图（下半部分），它什么也没做。

我做错什么了吗，或者这根本不被支持吗？解决方法是什么？

var options, ctx;

options = {
  type: 'line',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      data: [0, 1, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

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

options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
        x: 0,
        y: 0
      }, {
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 0
      }]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

<body>
  <canvas id="chart1" height="100"></canvas>
</body>

<body>
  <canvas id="chart2" height="100"></canvas>
</body>

Answer 1

我不确定offset是否按预期工作。请注意，即使在第一个图形上，y轴也不会进行填充。

我将look into suggestedMin和suggestedMax如下所示：

var options, ctx;

options = {
  type: 'line',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      data: [0, 1, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

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

options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
        x: 0,
        y: 0
      }, {
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 0
      }]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        ticks: {
            suggestedMin: -1,    // minimum will be -1, unless there is a lower value.
            suggestedMax: 3
        }
    }],
      yAxes: [{
        display: true,
        ticks: {
            suggestedMin: -1,    // minimum will be -1, unless there is a lower value.
            suggestedMax: 2
        }
    }]
    }
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

<body>
  <canvas id="chart1" height="100"></canvas>
</body>

<body>
  <canvas id="chart2" height="100"></canvas>
</body>

如何在散点图中偏移轴？

1 个答案: