图表Js:点之间不同的颜色填充使直线变直..需要曲线(lineTension)

Question

我正在构建一个数据点之间背景颜色不同的折线图。当我将数据集分解为以下内容时，lineTension将丢失并显示直线。如何制作曲线？

var data = {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
data: [73, 59, null, null],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4,
}, {
data: [null, 59, 70, null],
backgroundColor: "rgba(92, 193, 77, 0.3)",
borderColor: "rgba(92, 193, 77, 0.3)",
pointRadius: 0,
lineTension: 0.4
}, {
data: [null, null, 70, 55],
backgroundColor: "rgba(233, 104, 92, 0.3)",
borderColor: "rgba(233, 104, 92, 0.3)",
pointRadius: 0,
lineTension: 0.4
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var options = {
showTooltips: false,
}
var chart = new Chart(ctx).Line(data, options);

Answer 1

Linetension实际上正在工作，但每个数据集只显示2个数据点。你需要3才能显示曲线。

此外，您似乎在使用旧版本的ChartJs，最新版本使用以下语法：

var chart = new Chart(ctx, { type: "line", data: data,options: options });