Verlaufsfarbe in background JS

-2

Ich versuche, die Hintergrundfarbe in dem folgenden Code in Gradienten zu ändern, aber nicht sicher, wie dies zu nähern:Verlaufsfarbe in background JS

bandwidthChart = new Chart($("#bandwidthChart"), { 
        type: "bar", 
        data: { 
         labels: response.extra.labels, 
         datasets: [{ 
          label: "{% trans "Bandwidth" %}", 
          backgroundColor: "rgb(11, 98, 164)", 
          data: response.extra.data 
         }] 
        }, 
        options: { 
         scales: { 
          yAxes: [{ 
           scaleLabel: { 
            display: true, 
            labelString: response.extra.postUnits, 
           } 
          }] 
         }, 
         legend: { 
          display: false 
         }, 
         maintainAspectRatio: false, 
        } 
       });

Das ist, was ich habe:

Backgroundcolor: "rgb (11, 98, 164)"

Ich möchte diese Farbe in einen linearen Farbverlauf von oben nach unten ändern. Jede Hilfe wird geschätzt. Danke vielmals.

Quelle

2017-12-26 user2860295

Was ist 'Diagramm' dar? – AuxTaco

Sorry hat nicht klar erklärt, was es ist. Ich verwende Diagramme auf meiner Website, um die Informationen anzuzeigen (lineare, Kreisdiagramme etc.). Ich möchte sie mit einem Hintergrund mit Farbverlauf anstatt mit einer einzelnen Farbe etwas frischer aussehen lassen. – user2860295

Es hängt stark von Ihrer spezifischen Implementierung der Chart-Klasse ab. Ohne das ist es unmöglich zu sagen, warum ~ Srikanth495's Antwort nicht ausreichen würde. –

Es ist ein Ausschnitt mit Chart.js 2.7.1:

var bar_ctx = document.getElementById('bandwidthChart').getContext('2d'); 
var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 0, 600); 
purple_orange_gradient.addColorStop(0, 'orange'); 
purple_orange_gradient.addColorStop(1, 'purple'); 

bandwidthChart = new Chart(, { 
        type: "bar", 
        data: { 
         labels: response.extra.labels, 
         datasets: [{ 
          label: "{% trans "Bandwidth" %}", 
          backgroundColor: purple_orange_gradient, 
          data: response.extra.data 
         }] 
        }, 
        options: { 
         scales: { 
          yAxes: [{ 
           scaleLabel: { 
            display: true, 
            labelString: response.extra.postUnits, 
           } 
          }] 
         }, 
         legend: { 
          display: false 
         }, 
         maintainAspectRatio: false, 
        }

Demo: https://codepen.io/jonathandion/pen/aEpVba

Quelle

2017-12-26 21:32:19

Das ist es! Danke Jonathan. Funktioniert wie Charme. Wenn Sie mit der Maus über das Diagramm fahren, wird die Überlagerungs- (dunklere) Farbe über dem Verlauf nicht angezeigt, sondern nur der Verlauf von unten entfernt. Vielen Dank. – user2860295

Fügen Sie einfach 'hoverBackgroundColor: purple_orange_gradient' oder eine beliebige Farbe hinzu. –

Nochmals vielen Dank Jonathan. Schätze die Hilfe. – user2860295

Sie können es als versuchen:

background: linear-gradient(to bottom, red , yellow);

Dieses das System anweisen würde von rot nach gelb zu ändern, wie es auf den Boden bewegt.

Quelle

2017-12-26 21:22:35 Srikanth495

Vielen Dank, obwohl das ist, was ich versucht habe zu denken, es wird funktionieren, aber es nicht in diesem Fall. – user2860295

Verlaufsfarbe in background JS

Antwort

Verwandte Themen