J'utilise Highchartts et je me demandais s'il était possible de disposer des 3 premiers résultats dans un graphique à barres pour avoir une barre de couleurs différente, le reste de la carte? Je remplit le tableau d'un fichier CSV.
Voici mon javascript: voici un échantillon CSV: Donc, dans cet exemple, je voudrais "l'administration", "l'évangélisation" et "la miséricorde" d'avoir une "couleur de barre bleue" alors que le "berger", "leadership", etc. Couleur '. est-ce possible? Voici Fiddle
3 Réponses :
oui, Dans votre exécution push, vous devriez pouvoir définir la couleur pour ce point. Je ne suis pas trop familier avec la poussée lorsque nous utilisons un objet de données précompilé que nous envoyons. Mais à l'intérieur de notre .net, nous définissons la couleur (si nécessaire) sur un point particulier, puis envoyez l'objet de données au graphique.
J'utilise la version JavaScript ... Je ne sais pas où cette fonctionnalité serait pour le JS un, mais je vais fouiller et voir. Merci pour une certaine direction.
Basé sur le commentaire de l'OP, a frappé ma réponse précédente.
et p> $(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Spiritual Gifts Results'
},
colors: [
'#3BBEE3'
],
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Service'
}
},
series: []
};
var data = document.getElementById("hdn_Data");
// Split the lines
if (data.value != "") {
var lines = data.value.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
var data = {};
if (itemNo == 0) {
series.name = item;
} else {
data.y = parseFloat(item);
if (itemNo <= 3) {
data.color = 'Gray';
}
else {
data.color = '#3BBEE3';
}
series.data.push(data);
}
});
options.series.push(series);
}
});
// Create the chart
var chart1 = new Highcharts.Chart(options);
}
});
Merci, cela semble changer la couleur-- mais il semble modifier la couleur de chaque élément du graphique, même si je l'ai enveloppé dans un conditionnel, il semble changer la couleur de chaque barre du graphique à barres. Ce que je veux, c'est de changer la couleur des barres pour les 3 meilleures catégories.
Mettre à jour votre code ici et montrer également un lien de violon afin que je puisse vérifier
Voici un lien de violon: jsfiddle.net/vp2rm/6 (laissez-moi savoir si cela a fonctionné, je 'vu jamais violé auparavant)
@Mint, j'ai mis à jour ma réponse, regarde-le. Marquez comme réponse si cela vous aide :)
La meilleure chose que j'ai apprise à partir de cela est que vous pouvez manipuler de manière programmable votre objet d'options entier dans JavaScript avant de rendre le graphique. Cela vous permet de définir dynamiquement l'une des options de l'ensemble du graphique à ce que vous voulez.
Voici une mise à jour de la page qui donne aux 3 façons d'ajouter des données: http: //api.HighCharts. Com / Highcharts # Série
Voici un exemple
data: [
{ y: 34.4, color: 'red'}, // this point is red
21.8, // default blue
{y: 20.1, color: '#aaff99'}, // this will be greenish
20 // default blue
]
C'est en réalité l'approche la plus propre, puisque l'exemple de l'OP dispose de préoccupations de base-structure de données mêlées avec formatage des points de données. Probablement un mélange d'un formateur personnalisé avec une logique simple et pré-formater les données comme celle-ci est idéale.