如何在chartJS中确定水平点(x轴)之间的距离

Question

问题：嗨！我正在使用chart.js绘制图表。图表是动态的，有时显示10点，有时可能超过1000点，我已经成功地应用了一个面板，这样我的点就可以在一定距离上显示出来，轻松地阅读它们。

现在，我想知道是否有任何选项来设置x轴网格中各点之间的距离。现在它会自动调整点。

我尝试了什么：，我试图通过搜索其他堆栈溢出答案来完成步骤大小和缩放宽度，但是没有成功。任何帮助都会很感激的。

P.S:我在使用chart.js2

这是我的图表数据集

var data = {
    labels: data.graph_date,
    datasets: [
        {
            label: 'Assay Values',
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(255, 0, 0,1)",
            borderColor: "rgba(255, 0, 0,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderWidth: 1,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(255, 0, 0,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(255, 0, 0,1)",
            pointHoverBorderColor: "rgba(255, 0, 0,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: data.assay_value,
            spanGaps: false
        },var options = {
    responsive: false,
    title: {
        display: true,
        position: "top",
        text: label,
        fontSize: 18,
        fontColor: "#111"
    },
    legend: {
        display: true,
        position: "bottom",
        labels: {
            fontColor: "#333",
            fontSize: 16
        }
    },
    tooltips: {
        enabled: true,
        mode: 'single',
        callbacks: {
            label: function(tooltipItems, data) {
                var multistringText = ['Assay Value: '+tooltipItems.yLabel];
                multistringText.push('Assigned Value: '+assigned_value[tooltipItems.index]);
                multistringText.push('Sample ID: '+sample_id[tooltipItems.index]);
                return multistringText;
            }
        }
    },
    scales:{
        yAxes:[{
            ticks:{
                min:graph_min
            }
        }],
        xAxes: [{
            gridLines: {
                display:false
            }
        }]
    }
};
if(new_chart[ctx.canvas.id] != null)
    new_chart[ctx.canvas.id].destroy();

new_chart[ctx.canvas.id] =new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

在x轴中有这样的数据

[19-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,21-Aug-2015,22-Aug-2015,27-Aug-2015,29-Aug-2015,1-Sep-2015,2-Sep-2015,3-Sep-2015,]

在y轴数据中，如下所示

[0.1,0.05,0.89,0.89,0.79,0.58,0.68,0.25,0.98]

Answer 1

控制点之间距离的方法，它用最小、最大和步长来设置X和Y轴，这样无论图表中有多少点，它们都不会改变。

下面是一个设置天平的例子，这样它们就不会改变。无论图表上出现了多少点，一切都将保持不变。

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Points',
      data: [
        {x: 0, y: 2},
        {x: 1, y: 3}, 
        {x: 2, y: 2},
        {x: 1.02, y: 0.4},
        {x: 0, y: -1}
      ],
      backgroundColor: 'rgba(123, 83, 252, 0.8)',
      borderColor: 'rgba(33, 232, 234, 1)',
      borderWidth: 1,
      fill: false,
      showLine: false,
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Chart.js - Fixed X and Y Axis',
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: -1,
          max: 8,
          stepSize: 1,
          fixedStepSize: 1,
        }
      }],
      yAxes: [{
        ticks: {
          min: -2,
          max: 4,
          stepSize: 1,
          fixedStepSize: 1,
        }
      }]
    }
  }
});

下面是一个代码示例，它演示了这是什么样子