web-dev-qa-db-fra.com

ChartJS Line Charts - enlève la couleur sous les lignes

Bon, j’ai un graphique en courbes de ChartJS qui remplit directement à partir des données provenant de ma base de données ..____. [comme dans la capture d'écran ci-dessous].

 Example of Graph

Voici mon HTML:

<div ng-if="hasData">
    <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="options" click="onClick"></canvas>
<div>

Voici mon JS:

            scope.labels = ['02:00','04:00','06:00', '08:00', '10:00', '12:00','14:00', '16:00', '18:00', '20:00', '22:00'];
            scope.series = series;
            scope.data = [volumesSelectedDate, volumesPeakDate, volumesModelCapacity];


            scope.options = {
                scaleOverride: true,
                scaleStartValue: 0,
                scaleSteps: 11,
                scaleStepWidth: 6910,
            }

            scope.loadingDailyAppVolumes = false;
            scope.hasData = true;


        };
        scope.onClick = function (points, evt) {
            //console.log(points, evt);
        };

Alors, comment pourrais-je m'y prendre? De plus, comment pourrais-je régler manuellement la couleur de chaque ligne?

Exemple:

date sélectionnée: bleu, date de pointe: jaune, capacité du modèle: gris.

Merci.

javascriptangularjschart.js
24
Manus Gallagher

Vérifiez cette section sur la documentation Chart.js. Définissez la propriété fill sur false dans la configuration de votre jeu de données:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fill: false,
        data: [1, 2, 3]
    }]
};

Spécifiez un tableau dans la propriété borderColor si vous souhaitez que chaque ligne ait une couleur de trait différente:

var myColors = ['red', 'green', 'blue']; // Define your colors

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        fill: false,
        borderColor: myColors
        data: [1, 2, 3]
    }]
};
40
JasonK

La solution ci-dessous fonctionnait lorsque la carte intégrée js avec Angular

$scope.options = {
                    scales: {
                      yAxes: [
                        {
                          id: 'y-axis-1',
                          type: 'linear',
                          display: true,
                          position: 'left'
                        }
                      ]
                    },
                    elements: {
                        line: {
                                fill: false
                        }
                    }
                };

<canvas id="" class="col-sm-12 chart chart-line" chart-data="data"
                            chart-options="options" chart-colors="colors">
</canvas>
14
akshat thakar

Cela a fonctionné pour moi:

$scope.color = [{
                  backgroundColor: 'transparent',
                  borderColor: '#F78511',
                },];
5
Wahome

J'ai résolu ce problème. 

Premier pas. élément html interne add <- chart-colors = "colors" comme ça : 

<canvas id="line" class="chart chart-line" data="data" labels="labels" chart-colors="colors" legend="true" series="series" options="options" click="onClick"></canvas>

deuxième étape. $ scope val couleurs Addlike ceci: 

$scope.colors = [{
        backgroundColor : '#0062ff',
        pointBackgroundColor: '#0062ff',
        pointHoverBackgroundColor: '#0062ff',
        borderColor: '#0062ff',
        pointBorderColor: '#0062ff',
        pointHoverBorderColor: '#0062ff',
        fill: false /* this option hide background-color */
    }, '#00ADF9', '#FDB45C', '#46BFBD'];

bonne chance! 

5
오동규

J'ai eu le même problème, en utilisant angular-chart.js et j'ai obtenu le résultat souhaité avec:

$scope.override = {
    fill: false
};

et 

<canvas class="chart chart-line" 
    chart-dataset-override="override"
    chart-data="data">
</canvas>
0
Jared