Char.js補間リニア

Question

私は私の引き分けに問題があるのを見てみましょう： here

は、これは「x」の機能であり、行がまっすぐではありません
それはだからここ解像度のか、補間
の問題だ、私のチャートであるならば、私は知らない。

var scatterChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      datasets: [{ 
       borderWidth:2, 
       pointRadius :0, 
       borderColor: 'rgba(0, 0, 255, 1)', 
       label: 'Scatter Dataset', 
       data: JSON.parse(data), 
       fill: false, 
       lineTension: 0, 
       cubicInterpolationMode: 'linear' 

      }] 
     }, 
     options: { 
      scales: { 
       xAxes: [{ 
        type: 'linear', 
        position: 'bottom' 
       }] 
      }, 
      pan: { 
       enabled: true, 
       mode: 'xy' 
      }, 
      zoom: { 
       enabled: true, 
       mode: 'xy', 
      }, 
      responsive: true, 
      maintainAspectRatio: true, 
     } 
    }); 

Thxをみんな

Answer 1

問題は、chart.jsがデータポイント間に小さな線分を描く方法です。ここには、明るい線の上に完全な不透明線をアニメーション化するfiddleがあります。 2番目のラインはstep=1に成長していますが、軽いラインは素敵でまっすぐです[{x:-100,y:-100},{x:100,y:100}]。 step=10に変更すると、行の塗りがまっすぐに表示されます。

borderWidth、borderColor、およびopacityを変更して、以下のコード（またはフィドル）で遊ぶことができます。私はborderCapStyle: 'round'とborderJoinStyle: 'round'を追加しようとしましたが、どちらも大きな影響を及ぼさなかったようです。データ 'で

var ctx = document.getElementById("test").getContext("2d"); 
var i = -100; 
var data = [{x: i, y: i}]; 
var scatterChart = new Chart(ctx, { 
    type: 'line', 
    data: { 
    datasets: [{ 
     borderWidth: 2, 
     pointRadius: 0, 
     borderColor: 'rgba(0, 0, 255, 1)', 
     label: 'Scatter Dataset 1', 
     data: data, 
     fill: false, 
     lineTension: 0, 
     cubicInterpolationMode: 'linear' 
    }, { 
     borderWidth: 2, 
     pointRadius: 0, 
     borderColor: 'rgba(0, 0, 255, 0.4)', 
     label: 'Scatter Dataset 2', 
     data: [{x:-100,y:-100},{x:100,y:100}], 
     fill: false, 
     lineTension: 0, 
     cubicInterpolationMode: 'linear' 
    }] 
    }, 
    options: { 
    scales: { 
     xAxes: [{ 
     type: 'linear', 
     position: 'bottom' 
     }] 
    }, 
    pan: { 
     enabled: true, 
     mode: 'xy' 
    }, 
    zoom: { 
     enabled: true, 
     mode: 'xy', 
    }, 
    responsive: true, 
    maintainAspectRatio: true, 
    } 
}); 
var step = 1; 
var intervalId = setInterval(function() { 
    i += step; 
    if (i <= 100) { 
    scatterChart.data.datasets[0].data.push({x:i,y:i}); 
    scatterChart.update(); 
    } else { 
    clearInterval(intervalId); 
    } 
}, 200); 

と

<canvas id="test" width="400" height="300"></canvas>