javascript - 如何使用 chart.js 为折线图绘制圆边

Question

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

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

为了避免这种情况，我想获得线条的圆角边缘（但不是曲线！），但我不知道如何实现这一点。有人知道怎么做吗？

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

最好的

标签： javascriptchart.js

Answer 1

Chart.js 有一个选项，borderJoinStyle用于配置用于线图的连接类型。可用值为round、bevel或miter。来自 MDN的下图（由Chart.js 关于此选项的文档链接）分别说明了每个值的样式：

示例用法：

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