Können die Farben von Balken in einem Balkendiagramm basierend auf ihrem Wert variiert werden?

Question

Mit chart.js 2 können die Farben der Balken in einem Bar-Cart basierend auf ihrem Wert variiert werden?

Wenn beispielsweise die Skala 0 - 100 ist, können Spalten mit 50% und darüber grün sein, während 0-49% rot sein können.

Answer 1

Soweit ich weiß, gibt es keine Konfiguration oder Rückruf für jeden einzelnen Punkt gezeichnet wird. Der beste Weg, den ich mir vorstellen könnte, wäre, eine Funktion zu erstellen, die Ihr Diagramm-Konfigurations-/Datenobjekt verändern würde. Dies ist nicht der eleganteste Weg, um mit dem Problem umzugehen, aber es würde funktionieren.

The Fix

Fahren Sie mit Chart-config/Datenobjekt zu einer Funktion, die die Hintergrundfarbe hinzufügen.

Hauptpunkt des Beispiels ist function AddBackgroundColors(chartConfig)

Beispiel:

function AddBackgroundColors(chartConfig) { 
 
    var min = 1; // Min value 
 
    var max = 100; // Max value 
 
    var datasets; 
 
    var dataset; 
 
    var value; 
 
    var range = (max - min); 
 
    var percentage; 
 
    var backgroundColor; 
 

 
    // Make sure the data exists 
 
    if (chartConfig && 
 
    chartConfig.data && 
 
    chartConfig.data.datasets) { 
 
    // Loop through all the datasets 
 
    datasets = chartConfig.data.datasets; 
 
    for (var i = 0; i < datasets.length; i++) { 
 
     // Get the values percentage for the value range 
 
     dataset = datasets[i]; 
 
     value = dataset.data[0]; 
 
     percentage = value/range * 100; 
 

 
     // Change the background color for this dataset based on its percentage 
 
     if (percentage > 100) { 
 
     // > 100% 
 
     backgroundColor = '#0000ff'; 
 
     } else if (percentage >= 50) { 
 
     // 50% - 100% 
 
     backgroundColor = '#00ff00'; 
 
     } else { 
 
     // < 50% 
 
     backgroundColor = '#ff0000'; 
 
     } 
 
     dataset.backgroundColor = backgroundColor; 
 
    } 
 
    } 
 

 
    // Return the chart config object with the new background colors 
 
    return chartConfig; 
 
} 
 

 
var chartConfig = { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["percentage"], 
 
    datasets: [{ 
 
     label: '100%', 
 
     data: [100] 
 
    }, { 
 
     label: '50%', 
 
     data: [50] 
 
    }, { 
 
     label: '49%', 
 
     data: [49] 
 
    }, { 
 
     label: '5%', 
 
     data: [5] 
 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     yAxes: [{ 
 
     ticks: { 
 
      beginAtZero: true 
 
     } 
 
     }] 
 
    } 
 
    } 
 
}; 
 

 
window.onload = function() { 
 
    var ctx = document.getElementById("canvas").getContext("2d"); 
 
    chartConfig = AddBackgroundColors(chartConfig); 
 
    var myChart = new Chart(ctx, chartConfig); 
 
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.bundle.min.js"></script> 
 
<canvas id="canvas" width="400" height="200"></canvas>

Answer 2

Chart.js In 2 ist es möglich, mehrere Farben mit einem Array einzustellen.

So können Sie die backgroundColor als ein Array von Farbzeichenfolgen definieren, die den Datasets Daten entsprechen.

var myChart = new Chart(ctx, { 
    datasets: [{ 
    label: 'Votes', 
    data: [1, 2, 3], 
    // Make the first bar red, the second one green and the last one blue 
    backgroundColor: ['#f00', '#0f0', '#00f'] 
    }] 
}); 

Sie leicht ein Array auf den Werten in Daten basieren erzeugen:

function getColorArray(data, threshold, colorLow, colorHigh) { 
    var colors = []; 
    for(var i = 0; i < data.length; i++) { 
    if(data[i] > threshold) { 
     colors.push(colorHigh); 
    } else { 
     colors.push(colorLow); 
    } 
    } 
    return colors; 
} 

diese fiddle für eine funktionierende Demo Siehe