Füllbereich zwischen zwei Zeilen - Chart.js v2

Ich versuche, den Bereich zwischen zwei Zeilen in einem Liniendiagramm mit Chart.js zu füllen. Wie folgt: Füllbereich zwischen zwei Zeilen - Chart.js v2

Es gibt bereits eine Antwort here, die erklärt, wie man chartjs erweitert, um dies zu tun. Aber ich weiß, dass diese Funktion nun in V2 nativ ist (von this thread on the github issues page), das Problem ist, ich kann einfach keine Dokumentation zu diesem Thema finden.

Gibt es einen Abschnitt darüber im Dokument? Weiß jemand, wie man diese Eigenschaft benutzt?

Danke!

Quelle

2016-06-16 Miguel Péres

In dem Thread, den Sie verknüpft haben, heißt es, dass der Bereich bis zur 0-Linie gefüllt ist. Wenn also die Linie positiv ist, füllt sich der Bereich darunter (bis zur 0-Linie) und wenn die Linie negativ ist, füllt sie den darüber liegenden Bereich (bis zur 0-Linie). Möglicherweise müssen Sie die extending-Methode verwenden, um zu bekommen, was Sie wollen. –

Ich ging mit dem erweiterten Vorschlag, aber wenn chartjs Version 2 eine native Art hat, dies zu tun, sollte es besser sein, oder? –

Haben Sie das in v2 repliziert? Native oder durch Verlängerung? –

Hier ist ein kleines Plugin, das zwischen zwei beliebigen Dataset-Zeilen schattieren kann.

https://stackoverflow.com/a/41733045/852977

Quelle

2017-01-19 23:06:17 Wes

Stellen Sie sicher, dass die 2.6.0 Version importieren:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

dann die Regeln folgen, wie hier beschrieben: http://www.chartjs.org/docs/latest/charts/area.html

Unten ist ein Beispiel, und wie es aussieht:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>My two lines with colour between them</title> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
    </head> 
    <body> 
     <canvas id="mychart" width="300" height="200"></canvas> 
     <script> 
      var ctx = document.getElementById('mychart').getContext('2d'); //get the context (canvas) 

      var config = {    //configure the chart 
       type: 'line', 
       data: { 
        labels: [1, 2, 3, 4], 
        datasets: [{ 
         label: "Min", 
         backgroundColor: 'rgba(55, 173, 221, 0.6)', 
         borderColor: 'rgba(55, 173, 221, 1.0)', 
         fill: false, //no fill here 
         data: [5, 5, 3, 2] 
        }, 
        { 
         label: "Max", 
         backgroundColor: 'rgba(55, 173, 221, 0.6)', 
         borderColor: 'rgba(55, 173, 221, 1.0)', 
         fill: '-1', //fill until previous dataset 
         data: [8, 7, 6, 5] 
        }] 
       }, 
       options: { 
        maintainAspectRatio: false, 
        spanGaps: false, 
        elements: { 
         line: { 
          tension: 0.000001 
         } 
        }, 
        plugins: { 
         filler: { 
          propagate: false 
         } 
        }, 
        scales: { 
         xAxes: [{ 
          ticks: { 
           autoSkip: false 
          } 
         }] 
        } 
       } 
      }; 
      var chart = new Chart(ctx, config); 
     </script> 
    </body> 
</html>

Quelle

2017-07-30 10:32:07

Können Sie einige Inhalte veröffentlichen, die zeigen, wie Version 2.6.0 das Problem lösen hilft? Derzeit haben Sie einen Link zu den offiziellen Dokumenten hinzugefügt, was nutzlos wäre, wenn die Dokumente an einen anderen Ort verschoben werden. – Nisarg

Natürlich, entschuldigen Sie, ich dachte, es wäre selbsterklärend mit der Dokumentation. –

Ich habe ein Beispiel hinzugefügt. Eigentlich @NisargShah nach dem Lesen der ursprünglichen Frage: Die Anfrage ist eigentlich für die offizielle Dokumentation und wo man das findet, also wäre der Link zur offiziellen Dokumentation die Antwort ;-) –

Füllbereich zwischen zwei Zeilen - Chart.js v2

Antwort

Verwandte Themen