グラフの水平ポイント（x軸）間の距離を固定する方法

Question

問題：こんにちは！私はchart.jsを使ってグラフを描画しています。チャートはダイナミックであることがありますが、時には10ポイント以上を表示することもあります。パネルを正常に適用したので、ポイントをある程度離れた位置に表示して簡単に表示できます。

今は、x軸グリッドの点間の距離を設定するオプションがあるかどうかを知りたいと思います。今すぐポイントを自動的に調整します。 私は他のstackoverflowの答えを検索することにより、ステップサイズとscalewidthを行うことを試みたが成功しなかった：私が試した何

。どんな種類の助けでも大歓迎です。

PS：データは次のようであるy軸におけるこの

[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,] 

ようなデータは、IMこれは私chartjs X軸データセット

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

あるchart.js2

を使用してありますこの

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

が、これは仕事、あなたが何を意味するか、あなたがsuceedなかったん