Char.js插值線性

我試圖用chart.js之繪製函數我有我的畫有問題，讓我們來看看： here Char.js插值線性

這是「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傢伙

來源

2016-11-16 Olivier.B

在'數據：{數據集：[{數據：JSON.parse（數據）...'什麼是'傳遞給'JSON data'變量的值。 parse'？ –

它只是一個字符串，就像這樣的JS對象：[{x：1，y：1}，{x：2，y：2}，{x：3，y：3}，{x：4，y：5 }，.......，{x：100，y：100}] 這裏我的步驟是1 –

如果點是線性的，那麼它必須是'chart.js'渲染的方式。首先，在'var scatterChart'正上方添加一行'console.log（data）;'並將該輸出添加到您的問題中，以便我們可以看到正在解析的_true_「json」。接下來，嘗試對數據進行硬編碼：[{x：1，y：1}，{x：100，y：100}]，並查看該行是否看起來更好。 –

問題在於chart.js如何繪製數據點之間的小線段。這是一個fiddle，它可以在一條較亮的線條頂部生成一個完整的不透明線。第二行增長爲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>

來源

2016-11-17 19:49:51

Char.js插值線性

回答

相關問題