具有部分填充区域的折线图

Question

我使用 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 }
});

看看试试我也有一个fiddle

我喜欢的是一个系列，但只标记了一定比例的区域：

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 来裁剪该区域，但它是在 window 调整大小时重新创建的，所以这不是一个真正的选择。

这里有人知道该怎么做吗？

Answer 1

我自己找到了解决办法。我为 Chartist.js 创建了一个插件，它为 svg 添加了一个剪切路径。

https://github.com/jschirrmacher/chartist-plugin-partialarea

具有部分填充区域的折线图

Line chart with partially filled area

javascript

svg

chartist.js