如何固定圖表中水平點（x軸）之間的距離

Question

問題：大家好！我正在使用chart.js繪製圖表。圖表是一種動態的有時顯示10點，有時可以超過1000我已經成功地應用了一個面板，以便我的點可以顯示在一定的距離以便輕鬆閱讀。

現在我想知道是否有任何選項來設置x軸網格中的點之間的距離。現在它會自動調整點數。

我試過了： 我試圖通過搜索其他stackoverflow答案，但沒有成功做stepize和scalewidth。任何形式的幫助將不勝感激。

PS：即時通訊使用chart.js2

這是我的數據集chartjs

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, 
     } 
     }] 
    } 
    } 
}); 

這裏是一個codepen example演示一下這個看起來像