如何创建带有圆角的图表？

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
    })
});

Answer 1

它可以与border-radius一起使用；

svg {
  border-radius: 50%;
}

尽管看起来确实有些丑陋，但是您可以摆弄它； 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>