我使用Chart.JS绘制数据集,
然而,我得到了一个光滑的效果!
这是我得到的曲线:
下面是我的代码:
function plotChart(data, labels) {
var lineChartData = {
"datasets": [{
"data": data,
"pointStrokeColor": "#fff",
"fillColor": "rgba(220,220,220,0.5)",
"pointColor": "rgba(220,220,220,1)",
"strokeColor": "rgba(220,220,220,1)"
}],
"labels": labels
};
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
}
如何使用直线而不是曲线?
谢谢你
6条答案
按热度按时间q9rjltbz1#
版本1的解决方案(旧图表版本)
根据www.example.com上的文档chartjs.org
您可以在选项中设置“bezierCurve”并在创建图表时将其传入。
例如:
版本2的更新
根据全局选项中线路配置的更新文档
例如:
通过将
lineTension
设置为0(零),也可以直接在数据集结构中执行此操作。使用这些属性的数据对象示例如下所示。
3yhwsihp2#
您可以使用lineTension选项设置所需的曲线。将直线设置为0。您可以给予0-1之间的数字
db2dz4w83#
只是为了完成版本兼容性,并添加一些东西到这个不错的线程在这里:
仍然与
chart.js
v3.x.x相同(它与v2.x.x不向后兼容--但是,
lineTension
在data: { datasets: [{ lineTension: ...
)chart.js
v3.x.x的线张力接下来,您可以Run the snippet使用10个按钮来播放不同的lineTensions(0到1),就在这里:
第一个
uelo1irk4#
我已使用lineTension设置曲线的平滑度。
从docs:lineTension接收一个数字,即线条的贝塞尔曲线张力。设置为0可绘制直线。如果使用单调三次插值,则忽略此选项。
只要确保用不同的值测试你想要的线有多平滑。
例如:
3vpjnl9f5#
我想它已经被更新为
lineTension
。检查docs。kmbjn2e36#
Chart.js v3.9.1 -属性
tension
。文档链接