ChartJS Line Charts - usuń kolor pod liniami

Question

Okej, więc mam wykres liniowy ChartJS, który działa bezpośrednio z danych przychodzących dla mojej bazy danych. Potrzebuję teraz, aby pozbyć się koloru pod każdą z linii. [jak widać na zrzucie ekranu poniżej].

Tu jest mój 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> 

Oto mój 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); 
     }; 

Tak, jak pójdę na ten temat? Ponadto, w jaki sposób chciałbym ręcznie ustawić kolor dla każdej linii?

przykład:

wybrana data: niebieski, data piku: żółty, pojemność Model szarości.

Dzięki.

Answer 1

Sprawdź w dokumentach Chart.js this section. Ustaw właściwość false fill obrębie zbioru danych o konfiguracji:

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

określić tablicę do właściwości borderColor jeśli chcesz każda linia ma inną skoku kolor:

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

Ten pracował dla mnie:

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

Answer 3

Rozwiązałem ten problem.

Pierwszy krok. Element wewnętrzny HTML dodatek < - wykres-kolory = "kolory" następująco:

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

drugim etapie. $ scope val colors Dodaj w ten sposób:

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

powodzenia!

Answer 4

Poniżej rozwiązanie działa, gdy włączone js wykres z kątowa

$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

miałem ten sam problem, za pomocą skośnych chart.js i dostał pożądanego rezultatu z:

$scope.override = { 
    fill: false 
}; 

i

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