部分填充區域的折線圖

我使用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來剪輯區域，但它在窗口大小調整時重新創建，所以這不是一個真正的選項。

有沒有人在這裏有一個想法該怎麼辦？

來源

2016-05-12 Joachim Schirrmacher

有沒有可能在窗口resize事件中重新運行剪切代碼？（這是我嘗試尋找一種解決方案或解決方法之後唯一的想法，您還沒有想出自己的想法。） –

是的，我認爲這樣做會起作用。事實上，這是我在同時工作的解決方案的核心：我創建了一個插件。對於文檔，我會自己添加一個答案。 –