如何创建带圆角的图表？

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搭配； 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>

如何创建带圆角的图表？

How do I create a chart with rounded corners?

javascript

charts

chartist.js