代码之家  ›  专栏  ›  技术社区  ›  Hirschferkel

如何用chart.js绘制折线图的圆边

  •  1
  • Hirschferkel  · 技术社区  · 6 年前

    基本上chart.js为线图绘制尖边,如文档所示: chart.js line dagrams

    enter image description here

    如果数据值真的有很大的差异,这些边就会变得很尖,并且会透支很多值,甚至重叠显示正确值的点。

    为了避免这种情况,我想得到圆边的线(但不是曲线!),但我不知道如何实现这一点。 有人知道怎么做吗?

    (到目前为止,我找到的唯一解决办法是将张力设置为一个非常小的值,例如0.02,但这并不是最准确的方法…)

    最好的

    1 回复  |  直到 6 年前
        1
  •  1
  •   timclutton    6 年前

    chart.js有一个选项, borderJoinStyle ,用于配置用于线图的连接类型可用值为 round 我是说, bevel miter . 以下 image from MDN (由 Chart.js documentation on this option )分别说明每个值的样式:

    enter image description here

    示例用法:

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