Wie zwischen zwei Linien in einem Liniendiagramm schattieren mit chart.js Version2

Ich bin neu in chart.js und ich habe Probleme Schattierung zwischen 2 Zeilen in einem Liniendiagramm. Unten ist ein Beispiel dafür, was id erreichen mag:Wie zwischen zwei Linien in einem Liniendiagramm schattieren mit chart.js Version2

This is an example of what im after

aber die Basis-Funktionalität in chart.js Version scheint 2 bis nur Schatten zwischen einer Linie und 0 auf der y-Achse.

Hier ist der Code für die Grafik, die ich bisher habe. Ich würde gerne zwischen den Linien GTUpper und GTLower unterscheiden, da diese eine Reichweite beschreiben.

<html> 
    <div> 
     <canvas id="myChart"></canvas> 
    </div> 
</html> 


<script> 

function GenGraph(y) { 
    // function to generate the graph with chart.js 

    $(document).ready(function(){ 
    var roomCap = 220 
    var prediction = [62, 65, 135, 145, 140, 120, 135, 189, 180, 175, 100, 25] 
    var gndTruthUpper = [75, 100, 150, 175, 150, 150, 175, 200, 175, 150, 125, 100] 
    var gndTruthLower = [50, 50, 75, 50, 25, 50, 75, 100, 125, 150, 125, 100, 75] 

    var data = { 
     labels: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], 
      datasets: [{ 
       label: 'prediction', 
       fill: false, 
       pointRadius: 0, 
       borderColor: 'blue', 
       data: prediction 
      },{ 
       label: 'GTUpper', 
       fill: true, 
       pointRadius: 0, 
       borderDash: [10, 10], 
       borderColor: 'black', 
       data: gndTruthUpper 
      },{ 
       label: 'GTLower', 
       fill: false, 
       pointRadius: 0, 
       borderDash: [10, 10], 
       borderColor: 'black', 
       data: gndTruthLower 
      }] 
     }; 
     var options = { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         min: 0, 
         max: roomCap 
        } 
       }] 
      } 
     }; 

     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: data, 
      options: options 
     });  
    });  
}; 

</script>

Mein Problem ist, dass alle ähnlichen Beiträge zu Stackoverflow v1 beziehen und die Syntax scheint von v1 zu v2 geändert zu haben. Ich bin etwas verloren, wie ich die Basisfunktionalität auf diese Weise selbst erweitern kann. Jede Hilfe würde sehr geschätzt werden.

Quelle

2016-08-08 Barry Kidney

Dies hat auf eine andere Frage hier beantwortet: http://stackoverflow.com/a/41733045/852977 – Wes

Dies sollte den Trick tun.
Und hier ist eine Geige eines Plugins, das zwischen zwei beliebigen Datasets füllen wird.

https://jsfiddle.net/ke5n5LnL/26/

Code:

<html> 
    <div> 
     <canvas id="myChart"></canvas> 
    </div> 
</html> 


<script> 

var fillBetweenLinesPlugin = { 
    afterDatasetsDraw: function (chart) { 
     var ctx = chart.chart.ctx; 
     var xaxis = chart.scales['x-axis-0']; 
     var yaxis = chart.scales['y-axis-0']; 
     var datasets = chart.data.datasets; 
     ctx.save(); 

     for (var d = 0; d < datasets.length; d++) { 
      var dataset = datasets[d]; 
      if (dataset.fillBetweenSet == undefined) { 
       continue; 
      } 

      // get meta for both data sets 
      var meta1 = chart.getDatasetMeta(d); 
      var meta2 = chart.getDatasetMeta(dataset.fillBetweenSet); 

      ctx.beginPath(); 

      // vars for tracing 
      var curr, prev; 

      // trace set1 line 
      for (var i = 0; i < meta1.data.length; i++) { 
       curr = meta1.data[i]; 
       if (i === 0) { 
        ctx.moveTo(curr._view.x, curr._view.y); 
        ctx.lineTo(curr._view.x, curr._view.y); 
        prev = curr; 
        continue; 
       } 
       if (curr._view.steppedLine === true) { 
        ctx.lineTo(curr._view.x, prev._view.y); 
        ctx.lineTo(curr._view.x, curr._view.y); 
        prev = curr; 
        continue; 
       } 
       if (curr._view.tension === 0) { 
        ctx.lineTo(curr._view.x, curr._view.y); 
        prev = curr; 
        continue; 
       } 

       ctx.bezierCurveTo(
        prev._view.controlPointNextX, 
        prev._view.controlPointNextY, 
        curr._view.controlPointPreviousX, 
        curr._view.controlPointPreviousY, 
        curr._view.x, 
        curr._view.y 
       ); 
       prev = curr; 
      } 


      // connect set1 to set2 then BACKWORDS trace set2 line 
      for (var i = meta2.data.length - 1; i >= 0; i--) { 
       curr = meta2.data[i]; 
       if (i === meta2.data.length - 1) { 
        ctx.lineTo(curr._view.x, curr._view.y); 
        prev = curr; 
        continue; 
       } 
       if (curr._view.steppedLine === true) { 
        ctx.lineTo(prev._view.x, curr._view.y); 
        ctx.lineTo(curr._view.x, curr._view.y); 
        prev = curr; 
        continue; 
       } 
       if (curr._view.tension === 0) { 
        ctx.lineTo(curr._view.x, curr._view.y); 
        prev = curr; 
        continue; 
       } 

       // reverse bezier 
       ctx.bezierCurveTo(
        prev._view.controlPointPreviousX, 
        prev._view.controlPointPreviousY, 
        curr._view.controlPointNextX, 
        curr._view.controlPointNextY, 
        curr._view.x, 
        curr._view.y 
       ); 
       prev = curr; 
      } 

      ctx.closePath(); 
      ctx.fillStyle = dataset.fillBetweenColor || "rgba(0,0,0,0.1)"; 
      ctx.fill(); 
     } 
    } // end afterDatasetsDraw 
}; // end fillBetweenLinesPlugin 

Chart.pluginService.register(fillBetweenLinesPlugin); 

function GenGraph(y) { 
    // function to generate the graph with chart.js 

    $(document).ready(function(){ 
    var roomCap = 220 
    var prediction = [62, 65, 135, 145, 140, 120, 135, 189, 180, 175, 100, 25] 
    var gndTruthUpper = [75, 100, 150, 175, 150, 150, 175, 200, 175, 150, 125, 100] 
    var gndTruthLower = [50, 50, 75, 50, 25, 50, 75, 100, 125, 150, 125, 100, 75] 

    var data = { 
     labels: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"], 
      datasets: [{ 
       label: 'prediction', 
       fill: false, 
       pointRadius: 0, 
       borderColor: 'blue', 
       data: prediction 
      },{ 
       label: 'GTUpper', 
       fill: false, 
       pointRadius: 0, 
       borderDash: [10, 10], 
       borderColor: 'black', 
       data: gndTruthUpper, 
       fillBetweenSet: 2, 
       fillBetweenColor: 'rgba(0,0,0,0.1)' 
      },{ 
       label: 'GTLower', 
       fill: false, 
       pointRadius: 0, 
       borderDash: [10, 10], 
       borderColor: 'black', 
       data: gndTruthLower 
      }] 
     }; 
     var options = { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         min: 0, 
         max: roomCap 
        } 
       }] 
      } 
     }; 

     var ctx = document.getElementById("myChart").getContext("2d"); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: data, 
      options: options 
     });  
    });  
}; 

GenGraph(); 

</script>

Quelle

2017-01-19 23:20:09 Wes

auch sehen https://stackoverflow.com/questions/41467923/chart-js-fill-between-two-lines/41733045 # 41733045 – Wes

Danke für die Hilfe wes :) –

Wie zwischen zwei Linien in einem Liniendiagramm schattieren mit chart.js Version2

Antwort

Verwandte Themen