javascript - bar - Cartas de líneas ChartJS: elimina el color debajo de las líneas

line chart options chart js

Question

Bueno, tengo un gráfico de líneas de ChartJS funcionando que se llena directamente de los datos que vienen para mi db. Lo que necesito ahora es deshacerme del color debajo de cada una de las líneas. [como se ve en la captura de pantalla de abajo].

Aquí está mi 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>

Aquí está mi 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);
        };

Entonces, ¿cómo voy a hacer esto? Además, ¿cómo hago para configurar manualmente el color para cada línea?

Ejemplo:

fecha seleccionada: azul, fecha pico: amarillo, capacidad del modelo: gris.

Gracias.

Answer 1

A continuación la solución estaba funcionando cuando se integró la tabla js con 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>

Answer 2

Consulte esta sección en los documentos Chart.js. Establezca la propiedad de fill en falso dentro de la configuración de su conjunto de datos:

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

Especifique una matriz para la propiedad borderColor si desea que cada línea tenga un color de trazo diferente:

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 3

Esto funcionó para mí:

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

Answer 4

Resolví este problema.

Primer paso. html element inner add <- chart-colors = "colors" de esta manera:

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

segundo paso. $ scope val colors Agregar como esto:

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

¡buena suerte!

Answer 5

Tuve el mismo problema, usando angular-chart.js y obtuve el resultado deseado con:

$scope.override = {
    fill: false
};

y

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