如何使用chart.js绘制圆形边缘的线图

Question

基本上，chart.js为线图绘制尖的边缘，如文档中所示：chart.js line dagrams

如果数据值之间确实存在很大差异，则这些边缘将变得非常尖锐，并且会过度绘制值，甚至重叠显示正确值的点。

为避免这种情况，我想使线（而不是曲线！）的边缘变圆，但是我不知道如何实现这一点。 有人知道这样做的方法吗？

（到目前为止，我发现的唯一解决方法是将张力设置为一个很小的值，例如0.02，但这实际上不是最准确的方法...）

最佳

Answer 1

Chart.js有一个选项borderJoinStyle，用于配置用于线图的连接类型。可用值为round，bevel或miter。以下image from MDN（由Chart.js documentation on this option链接）分别说明了每个值的样式：

用法示例：

options: {
    elements: {
        line: {
            borderJoinStyle: 'round'
        }
    }
}