Liniendiagramm mit teilweise gefülltem Bereich

Question

Ich verwende ein Liniendiagramm von Chartist.js und möchte es nur auf der linken Seite bis zu einem bestimmten Wert auf der X-Achse gefüllt werden.

Meine Idee war es, zwei verschiedene Datenreihen zu verwenden, eine gefüllt, die andere nicht. Das funktioniert ganz gut, nur an der Kreuzung ist es gebogen.

Hier ist mein HTML:

<div id="chart-comparison" class="ct-chart ct-golden-section"></div> 

Und hier die 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 } 
}); 

zu sehen und ich versuche auch

eine fiddle haben, was ich würde wie haben ist eine einzelne Serie, aber nur mit einem Prozentsatz des markierten Bereichs:

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 } 
}); 

Ich habe bereits versucht, den Bereich durch Ändern der Svg dynamisch, aber es ist auf Fenstergröße neu erstellt, so dass dies nicht wirklich eine Option ist.

Hat jemand hier eine Idee, was zu tun ist?

Answer 1

Ich habe selbst eine Lösung gefunden. Ich habe ein Plugin für Chartist.js erstellt, das dem SVG einen Beschneidungspfad hinzufügt.

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