Grafici a linee ChartJS - rimuovi il colore sotto le righe

Question

Ok, quindi ho un grafico a linee ChartJS che funziona direttamente dai dati in arrivo per il mio db. Quello di cui ho bisogno ora è di eliminare il colore sotto ciascuna linea. [come visto nello screenshot qui sotto].

Ecco il mio 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> 

Ecco la mia 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); 
     }; 

Così, come potrei fare per questo? Inoltre, come faccio ad impostare manualmente il colore per ogni linea?

Esempio:

data selezionata: blu, picco Data: giallo, capacità modello: grigio.

Grazie.

Answer 1

Controllare this section sui documenti Chart.js. Impostare la proprietà fill su false nella configurazione del set di dati:

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

specifica una matrice alla proprietà borderColor se si vuole ogni riga per avere un diverso colore del tratto:

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] 
    }] 
}; 

Answer 2

Questo ha funzionato per me:

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

Answer 3

Ho risolto questo problema.

Primo passo. html elemento aggiuntivo interno < - grafico-colori = "colori" simili:

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

secondo passo. $ colori portata val Aggiungi come questo:

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

buona fortuna!

Answer 4

Questi soluzione funzionava quando integrato js grafico con angolare

$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> 

Answer 5

Ho avuto lo stesso problema, utilizzando angolari-chart.js e ottenuto il risultato desiderato con:

$scope.override = { 
    fill: false 
}; 

e

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