web-dev-qa-db-fra.com

Chart.js - ajoute un dégradé au lieu d'une couleur unie - solution de mise en œuvre

J'utilise Chart.js et tout va bien, mais je veux remplacer le fond de couleur actuelle (fillColor: "rgba (250,174,50,0.5)") par un dégradé. J'ai une solution pour remplacer le gradient, mais il est trop difficile pour moi de la mettre en œuvre avec ma faible connaissance de JS. Je suppose que c'est assez facile pour quelqu'un qui connaît JS.

Donc mon code Chart.js:

        <script>

        var data = {
            labels : ["02:00","04:00","06:00","08:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","00:00"],
            datasets: [
                {
                    fillColor : "rgba(250,174,50,0.5)",
                    strokeColor : "#ff6c23",
                    pointColor : "#fff",
                    pointStrokeColor : "#ff6c23",
                    pointHighlightFill: "#fff",
                    pointHighlightStroke: "#ff6c23",
                    data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
                }
            ]
        };

        var options = {
            responsive: true,
            datasetStrokeWidth : 3,
            pointDotStrokeWidth : 4,
            tooltipFillColor: "rgba(0,0,0,0.8)",
            tooltipFontStyle: "bold",
            tooltipTemplate: "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
            scaleLabel : "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>"
        };

        var ctx = document.getElementById("temp-chart").getContext("2d");
        var myLineChart = new Chart(ctx).Line(data, options);

    </script>

Et voici la solution avec gradient . Quelqu'un peut-il essayer d'implémenter ce fond dégradé au lieu de mon fond solide actuel? Merci pour l'aide.

J'ai essayé de l'implémenter, mais les autres fonctions ne fonctionnaient pas (comme les balances, etc.).

javascriptchart.js
13
John Cavalier

Le lien que vous avez fourni était assez clair, vous devez mettre dans le champ fillColor dans les jeux de données un objet linearGradient au lieu d'une couleur unie. Vous pouvez faire des dégradés complexes, mais voici le code d'un simple (changer l'opacité du même orange): 

var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');   
gradient.addColorStop(1, 'rgba(250,174,50,0)');

Et vos jeux de données complets:

datasets: [
            {
                fillColor : gradient, // Put the gradient here as a fill color
                strokeColor : "#ff6c23",
                pointColor : "#fff",
                pointStrokeColor : "#ff6c23",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "#ff6c23",
                data : [25.0,32.4,22.2,39.4,34.2,22.0,23.2,24.1,20.0,18.4,19.1,17.4]
            }
        ]

Voyez-le en action dans ceci JSFiddle

28
bviale

Remarque: pour les personnes utilisant une version plus récente (v2.7.0) de Chart.js, découvrez que cela ne fonctionne pas lorsque vous copiez-collez la réponse de @ bviale dans votre base de code. Certains noms de propriété ont changé:

fillColor -> backgroundColor
strokeColor -> borderColor
pointColor -> pointBackgroundColor
pointStrokeColor -> pointBorderColor

Vous devrez mettre à jour ces noms de propriété pour que cela fonctionne.

Référence: https://github.com/chartjs/Chart.js/blob/master/docs/charts/line.md#dataset-properties

8
AJ Hsu

Pour utiliser in react, j’ai procédé de la manière suivantevous devez transmettre un identifiant à votre composant, puis récupérer l’élément en utilisant cet identifiant

import React, { Component } from 'react'
import { Line } from 'react-chartjs-2'

export default class GraphComponent extends Component{
  constructor(props){
    super(props)
    this.state = {
      chartData: {}
    }
  }

  componentDidMount(){
    //your code
    var ctx = document.getElementById('canvas').getContext("2d")
    var gradient = ctx.createLinearGradient(0, 0, 0, 400)
    gradient.addColorStop(0, 'rgba(229, 239, 255, 1)')
    gradient.addColorStop(1, '#FFFFFF')
    const newData = {
      labels: [1, 1],
      datasets: [
        {
          label: 'usd',
          data: [1,1],
          backgroundColor: gradient,
          borderColor: this.props.border_color,
          pointRadius: 0
        }
      ]

    }
    this.setState({chartData: newData})
  }

  //more of your code

  render(){
    return(
          <Line
            id='canvas'//you need to give any id you want
            data={this.state.chartData}
            width={100}
            height={30}
            options={{
              legend: {
                display: false
              }
            }}
          />

    )
  }
}

ceci est seulement ma deuxième réponse alors s'il vous plaît pardonnez-moi si j'ai commis des erreurs d'écriture

1
Nishith