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来剪切区域，但是在窗口调整大小时会重新创建，所以这不是一个选项。

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

Answer 1

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

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

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

1 个答案: