如何创建一个带圆角的图表？

Question

我创建了一个Chartist的折线图，并希望使图表的角落像下面的图像一样圆润：

我需要在哪里设置属性，或者是否有可能让它看起来像我想要的那样？

new Chartist.Line('#dashboardChartStats1', {
    labels: [1, 2, 3, 4, 5, 6, 7],
    series: [
        [5, 6, 7, 4, 7, 6, 5]
    ]
}, {
    low: 0,
    high: 10,
    showArea: true,
    fullWidth: true,
    axisX: {
        offset: 0,
        showLabel: false
    },
    axisY: {
        offset: 0,
        showGrid: false,
        showLabel: false
    },
    lineSmooth: Chartist.Interpolation.cardinal({
        tension: 1,
        fillHoles: false
    })
});

- encodeslife

Answer 1

使用border-radius属性可以实现。

最初的回答

svg {
  border-radius: 50%;
}

虽然看起来有点丑，但你可以通过调整进行修改。 在此处fiddle：fiddle here 没有通过图表库的控件实现此功能的方法。也许一些css魔法可以使其更好，但我已经没有精力了。

同时嵌入如下；

new Chartist.Line('.container', {
    labels: [1, 2, 3, 4, 5, 6, 7],
    series: [
        [5, 6, 7, 4, 7, 6, 5]
    ]
}, {
    low: 0,
    high: 10,
    showArea: true,
    fullWidth: true,
    axisX: {
        offset: 0,
        showLabel: false
    },
    axisY: {
        offset: 0,
        showGrid: false,
        showLabel: false
    },
    lineSmooth: Chartist.Interpolation.cardinal({
        tension: 1,
        fillHoles: false
    })
});

.container {
  width: 300px;
  height: 300px;
}

svg {
    border-radius: 50%;
}

<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>

<div class="container"></div>

- buræquete