我使用Chartist.js的折线图并希望它被填充但仅在左侧直到 X 轴上的某个值。
我的想法是使用两个不同的数据系列，一个填充，另一个不填充。这工作得很好，只是在它弯曲的交界处。
这是我的 HTML：
<div id="chart-comparison" class="ct-chart ct-golden-section"></div>
这里是 JS：
new Chartist.Line('#chart-comparison', {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
series: [
{
name: 'series-1',
data: [0, 2, 4, 5]
},
[null, null, null, 5, 8, 7, 4, 3, 1, 0]
]
}, {
fullWidth: true,
showPoint: false,
series: { 'series-1': { showArea: true }},
axisY: { onlyInteger: true }
});
看看和尝试我也有一个小提琴
我想要的是一个系列，但只标记了一部分区域：
new Chartist.Line('#chart-comparison', {
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
series: [
{
name: 'series-1',
data: [0, 2, 4, 5, 8, 7, 4, 3, 1, 0]
}
]
}, {
fullWidth: true,
showPoint: false,
series: { 'series-1': {
showArea: true,
markOnly: '56%' // <---- This is an undefined attribute which I would like to use
}},
axisY: { onlyInteger: true }
});
我已经尝试通过动态更改 svg 来剪辑该区域，但它是在窗口调整大小时重新创建的，所以这不是一个真正的选择。
这里有人知道该怎么做吗？