[FRAGE] Balken hervorheben - Highcharts
- Ersteller mccracker
- Erstellt am
Hi.
In Javascript.
Habe bei jsfiddle folgendes Diagramm:
HTML:
JS:
Hier möchte ich zum Beispiel den Balken Lian Li PC B16 hervorheben, damit dass ich dem Balken eine andere Farbe geben kann.
Wie mache ich das?
Gruß und Danke!
In Javascript.
Habe bei jsfiddle folgendes Diagramm:
HTML:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>JS:
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
width: 880,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.0)'
},
title: {
text: '' //Diagrammtitel, leerlassen wenn nicht gewünscht
},
subtitle: {
text: '' //Untertitel vergeben, leerlassen wenn nicht gewünscht
},
colors: ['#717171'], //Balkenfarben
xAxis: {
type: 'category',
labels: {
rotation: 0,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'dB(A) - weniger ist besser'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.1f} db(A)</b>'
},
series: [{
name: 'Angaben in db(A) - weniger ist besser',
data: [
['Nanoxia DS 1', 35.4],
['Lian Li PC-V650', 35.3],
['Aerocool Mechatron', 35.1],
['Fractal-Design Arc-XL', 35.1],
['Cooltek G3', 35.1],
['Lian Li PC-A79', 34.8],
['Fractal-Design Arc Midi R2', 34.8],
['Lian Li PC-B16 - offen', 34.3],
['Lian Li PC-B16 - geschl.', 34.2],
['Fractal-Design Define XL R2', 33.6],
['LC-Power Gaming 975W', 33.6],
['Aerocool XPredator', 31.8], ],
dataLabels: { //Balkenbeschriftung
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
format: '{point.y:.1f} dB(A)', // Einheit der Balkenlinien
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
//textShadow: '0 0 3px black'
}
}
}]
});
});Hier möchte ich zum Beispiel den Balken Lian Li PC B16 hervorheben, damit dass ich dem Balken eine andere Farbe geben kann.
Wie mache ich das?
Gruß und Danke!
Hallo,
wieder so ein "fertiges Plug-in" ;-)
Um den aktiven Code ändern zu können, bräuchte man noch mehr Infos.
Hast du schon mal in die Beschreibung dieses Plug-In reingeschaut?
Diese Eigenschaft könnte überschrieben werden, wenn man denn den Quellcode der kompletten Seite hätte und wüsste, wo was ausgeführt wird.
Entweder kennt jemand hier "highcharts" und kennt sich damit aus, oder es braucht noch weitere Infos.
Willst du einen Balken einer Farbe zuteilen oder umgekehrt?
Programmiersprachen sind so empfindlich wie die deutsche Sprache!
Wem willst du welche Farbe zuordnen? ... und:
Wie willst du den Balken optisch tatsächlich hervorheben?
*grübel*
Gruß,
Heinz
wieder so ein "fertiges Plug-in" ;-)
Um den aktiven Code ändern zu können, bräuchte man noch mehr Infos.
Hast du schon mal in die Beschreibung dieses Plug-In reingeschaut?
Diese Eigenschaft könnte überschrieben werden, wenn man denn den Quellcode der kompletten Seite hätte und wüsste, wo was ausgeführt wird.
Entweder kennt jemand hier "highcharts" und kennt sich damit aus, oder es braucht noch weitere Infos.
Willst du einen Balken einer Farbe zuteilen oder umgekehrt?
Programmiersprachen sind so empfindlich wie die deutsche Sprache!
Wem willst du welche Farbe zuordnen? ... und:
Was verstehst du unter einem Chart?
Wie willst du den Balken optisch tatsächlich hervorheben?
*grübel*
Gruß,
Heinz
Dieses Diagramm soll bei uns bald unsere Bilderdiagramme ersetzen. Das Plugin heißt Highcharts und ist bei uns aber noch nicht eingebaut. Zu finden ist es hier: Highcharts - Stacked bar. Über jsfiddle passe ich nur das Design zur Zeit an.
In meinem Beispiel sieht man doch, dass alle Balken dieses Diagrammes (Chart) alle die gleiche Farbe haben. Da ich diese Diagramme für Testberichte nutze und das Diagramm sich als Vergleich in einem Testbericht eines bestimmten Produktes befindet, soll dieses Produkt in dem Diagramm hervorgehoben werden. Also dass man nicht erst suchen muss. Um einen bestimmten Wert hervorzuheben reicht es mir, wenn ich dem einen Balken eine andere Farbe geben kann. So wäre dieser Eintrag direkt im Diagramm zu finden.
Details zu meiner Seite, wo es eingebaut werden soll, kann ich hier nicht geben, da diese noch im Beta-Status ist. Als CMS wird dort aber ein Modx verwendet.
Reicht das an Information?
Ich dachte auch, dass dieses Highcharts schon relativ bekannt sei, gibt es dazu vielleicht bessere Alternativen? Vielleicht dieses Google-Chart? Es muss halt nur etwas sein, dass wir in unsere Eingabemaske einfügen können. Dieser Code wird dann im CMS ausgeführt und das Diagramm wird angezeigt. Damit gibt es auch garkeine Probleme, nur wäre das mit einem farbigen Balken für den betreffenden Eintrag schon besser. Gerade auch in Hinblick der immer länger werdenden Vergleichstabelle.
Gruß,
Mario
In meinem Beispiel sieht man doch, dass alle Balken dieses Diagrammes (Chart) alle die gleiche Farbe haben. Da ich diese Diagramme für Testberichte nutze und das Diagramm sich als Vergleich in einem Testbericht eines bestimmten Produktes befindet, soll dieses Produkt in dem Diagramm hervorgehoben werden. Also dass man nicht erst suchen muss. Um einen bestimmten Wert hervorzuheben reicht es mir, wenn ich dem einen Balken eine andere Farbe geben kann. So wäre dieser Eintrag direkt im Diagramm zu finden.
Details zu meiner Seite, wo es eingebaut werden soll, kann ich hier nicht geben, da diese noch im Beta-Status ist. Als CMS wird dort aber ein Modx verwendet.
Reicht das an Information?
Ich dachte auch, dass dieses Highcharts schon relativ bekannt sei, gibt es dazu vielleicht bessere Alternativen? Vielleicht dieses Google-Chart? Es muss halt nur etwas sein, dass wir in unsere Eingabemaske einfügen können. Dieser Code wird dann im CMS ausgeführt und das Diagramm wird angezeigt. Damit gibt es auch garkeine Probleme, nur wäre das mit einem farbigen Balken für den betreffenden Eintrag schon besser. Gerade auch in Hinblick der immer länger werdenden Vergleichstabelle.
Gruß,
Mario
Zuletzt bearbeitet:
mikdoe
Moderator
Die Definition
also z.B.
Hinter der eckigen Klammer das Komma muss bleiben!
Sollte das nicht gehen versuch die Farben mal in der
colors: ['#717171'], //Balkenfarben sieht mir wie ein Array aus. Versuch mal, durch Komma getrennt so zu tun, als sei jede Position ein Balken,also z.B.
colors: ['#717171','green','red','black' usw....],Hinter der eckigen Klammer das Komma muss bleiben!
Sollte das nicht gehen versuch die Farben mal in der
#...... Schreibweise. An manchen Stellen gehen die Namen nicht, das weiss ich bei diesem Plugin nicht. Das müsste aber auch in der Doku zu finden sein."relativ" ;-)Reicht das an Information?
Ich dachte auch, dass dieses Highcharts schon relativ bekannt sei, ...
Eigentlich reicht das nicht ... man müsste sich den ausgegebenen HTML-Code ansehen.
Dieser Balken hat darin bestimmt eine eigene Klasse. Sobald die Klasse bekannt ist, kann man erkennen, ob es sich tatsächlich um eine "Farbe"(color) oder eine "Hintergrundfarbe"(background-color) handelt. Dementsprechend muss dann der Code angepasst werden.
Bei eingebundenen Plugins geht das sehr gut mit jQuery:
Code:
<script type="text/javascript">
$(document).ready(function(){
$(".KLASSENNAME").css("background-color", "#FF0000");
});
</script>Gruß,
Heinz
Ich weiß von meinen Seitenmacher nur soviel, dass das Design des Diagrammes später über CSS realisiert wird. Nur war er eben der Meinung, dass man mit dem Highchart keine eigene Farbe eines Balkens vorgeben kann.
Ich habe hier mal den Link zu meinem Diagramm 5v - JSFiddle
Mir geht es also primär erstmals darum, ob es überhaupt machbar ist, dass man speziell einem Wert eine andere Farbe verpasst. Das mit dem Array der Farbangaben war irgendwie ohne Wirkung. Und mit dem Plugin kann ich es nicht testen, da es eben noch überhaupt nicht eingebunden ist bei uns. Wie gesagt, die Seite wird noch bearbeitet und ich habe für Diagramme halt die Vorgabe, dass ich einen JS-Code in das Modx (dort in die Funktion Migx) als Eintrag des Artikels einfügen kann. Es ist also keine fest verbaute Funktion oder Plugin, sondern man soll je nach Wunsch in dem Artikel das Diagramm über den JS-Code einfügen können.
gruß
Ich habe hier mal den Link zu meinem Diagramm 5v - JSFiddle
Mir geht es also primär erstmals darum, ob es überhaupt machbar ist, dass man speziell einem Wert eine andere Farbe verpasst. Das mit dem Array der Farbangaben war irgendwie ohne Wirkung. Und mit dem Plugin kann ich es nicht testen, da es eben noch überhaupt nicht eingebunden ist bei uns. Wie gesagt, die Seite wird noch bearbeitet und ich habe für Diagramme halt die Vorgabe, dass ich einen JS-Code in das Modx (dort in die Funktion Migx) als Eintrag des Artikels einfügen kann. Es ist also keine fest verbaute Funktion oder Plugin, sondern man soll je nach Wunsch in dem Artikel das Diagramm über den JS-Code einfügen können.
gruß
Sempervivum
Banned
Schau mal, ob dir dies weiter hilft:
Highcharts API Reference
Ich habe es mal in deinem Fiddle getestet und es hat funktioniert.
In der Doku gibt es auch eine Demo:
http://jsfiddle.net/gh/get/jquery/1...ples/highcharts/series/data-array-of-objects/
Highcharts API Reference
Ich habe es mal in deinem Fiddle getestet und es hat funktioniert.
In der Doku gibt es auch eine Demo:
http://jsfiddle.net/gh/get/jquery/1...ples/highcharts/series/data-array-of-objects/
Zuletzt bearbeitet:
Ahh danke dir.
Ich habe das nun soweit hinbekommen:
Nur bekomme ich das nun nicht mehr mit den Datenlabels hin, also das hinter den Balken die Werte + Einheit zu sehen sind.
Bei dem anderen Diagramm hatte ich noch dieses hier drin:
aber wenn ich versuche es einzubauen, wird mir das Diagramm nicht mehr angezeigt. Ich glaube ich baue das irgendwie immer an der falschen Stelle ein oder irgendwo fehlte ein/e Komma/Klammer ect. . Kann mir einer von Euch zeigen wie ich das noch mit einbaue?
Besten Dank bis hierher.
Gruß,
Mario
Ich habe das nun soweit hinbekommen:
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
width: 880,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.0)'
},
title: {
text: '' //Diagrammtitel, leer lassen wenn nicht gewünscht
},
subtitle: {
text: '' //Untertitel vergeben, leer lassen wenn nicht gewünscht
},
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.1f} db (A)</b>'
},
yAxis: {
min: 0,
title: {
text: 'dB(A) - weniger ist besser'
}
},
xAxis: {
categories: ['Aerocool XPredator', 'LC-Power Gaming 975W', 'Fractal-Design Define XL R2', 'Lian Li PC-B16 - geschl.', 'Lian Li PC-B16 - offen', 'Fractal-Design Arc Midi R2', 'Lian Li PC-A79', 'Cooltek G3', 'Fractal-Design Arc-XL', 'Aerocool Mechatron', 'Lian Li PC-V650', 'Nanoxia DS 1']
},
series: [{
data: [{
name: 'Aerocool XPredator',
color: '#717171',
y: 31.8
}, {
name: 'LC-Power Gaming 975W',
color: '#717171',
y: 33.6
}, {
name: 'Fractal-Design Define XL R2',
color: '#717171',
y: 33.6
}, {
name: 'Lian Li PC-B16 - geschl.',
color: '#717171',
y: 34.2
}, {
name: 'Lian Li PC-B16 - offen',
color: '#C10000',
y: 34.3
}, {
name: 'Fractal-Design Arc Midi R2',
color: '#717171',
y: 34.8
}, {
name: 'Lian Li PC-A79',
color: '#717171',
y: 34.8
}, {
name: 'Cooltek G3',
color: '#717171',
y: 35.1
}, {
name: 'Fractal-Design Arc-XL',
color: '#717171',
y: 35.1
}, {
name: 'Aerocool Mechatron',
color: '#717171',
y: 35.1
}, {
name: 'Lian Li PC-V650',
color: '#717171',
y: 35.3
}, {
name: 'Nanoxia DS 1',
color: '#717171',
y: 35.4
}]
}]
});
});Nur bekomme ich das nun nicht mehr mit den Datenlabels hin, also das hinter den Balken die Werte + Einheit zu sehen sind.
Bei dem anderen Diagramm hatte ich noch dieses hier drin:
Code:
dataLabels: { //Balkenbeschriftung
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
format: '{point.y:.1f} dB(A)', // Einheit der Balkenlinien
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
//textShadow: '0 0 3px black'
}
}aber wenn ich versuche es einzubauen, wird mir das Diagramm nicht mehr angezeigt. Ich glaube ich baue das irgendwie immer an der falschen Stelle ein oder irgendwo fehlte ein/e Komma/Klammer ect. . Kann mir einer von Euch zeigen wie ich das noch mit einbaue?
Besten Dank bis hierher.
Gruß,
Mario
Zuletzt bearbeitet:
Sempervivum
Banned
Also bei mir funktioniert es. Ich musste allerdings den Code dataLabels hinter series einbauen:
Wenn bei dir garnichts angezeigt wird, musst Du einen Syntaxfehler drin haben, aber das kann man nur erkennen, wenn man den Code im ganzen sieht. Trag doch die dataLabels mal in dein Fiddle ein.
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
width: 880,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.0)'
},
title: {
text: '' //Diagrammtitel, leerlassen wenn nicht gewünscht
},
subtitle: {
text: '' //Untertitel vergeben, leerlassen wenn nicht gewünscht
},
colors: ['#717171'], //Balkenfarben
credits: {
enabled: false
},
xAxis: {
type: 'category',
labels: {
rotation: 0,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'dB(A) - weniger ist besser'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.1f} db(A)</b>'
},
series: [{
name: 'Angaben in db(A) - weniger ist besser',
data: [
['Aerocool XPredator', 31.8],
['LC-Power Gaming 975W', 33.6],
['Fractal-Design Define XL R2', 33.6],
['Lian Li PC-B16 - geschl.', 34.2],
['Lian Li PC-B16 - offen', 34.3],
['Fractal-Design Arc Midi R2', 34.8],
['Lian Li PC-A79', 34.8],
['Cooltek G3', 35.1],
['Fractal-Design Arc-XL', 35.1],
['Aerocool Mechatron', 35.1],
['Lian Li PC-V650', 35.3],
['Nanoxia DS 1', 35.4], ],
dataLabels: { //Balkenbeschriftung
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
format: '{point.y:.1f} dB(A)', // Einheit der Balkenlinien
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
//textShadow: '0 0 3px black'
}
}
}]
});
});
Zuletzt bearbeitet:
Sempervivum
Banned
Siehe oben, habe gerade editiert.
Sempervivum
Banned
Ahh, ja. Jetzt hatte ich etwas den Überblick verloren. Aber so funktioniert es:
siehe hier:
5v - JSFiddle
Code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
width: 880,
height: 600,
backgroundColor: 'rgba(255, 255, 255, 0.0)'
},
title: {
text: '' //Diagrammtitel, leerlassen wenn nicht gewünscht
},
subtitle: {
text: '' //Untertitel vergeben, leerlassen wenn nicht gewünscht
},
colors: ['#717171'], //Balkenfarben
credits: {
enabled: false
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y:.1f} db (A)</b>'
},
yAxis: {
min: 0,
title: {
text: 'dB(A) - weniger ist besser'
}
},
xAxis: {
categories: ['Aerocool XPredator', 'LC-Power Gaming 975W', 'Fractal-Design Define XL R2', 'Lian Li PC-B16 - geschl.', 'Lian Li PC-B16 - offen', 'Fractal-Design Arc Midi R2', 'Lian Li PC-A79', 'Cooltek G3', 'Fractal-Design Arc-XL', 'Aerocool Mechatron', 'Lian Li PC-V650', 'Nanoxia DS 1']
},
series: [{
data: [{
name: 'Aerocool XPredator',
color: '#717171',
y: 31.8
}, {
name: 'LC-Power Gaming 975W',
color: '#717171',
y: 33.6
}, {
name: 'Fractal-Design Define XL R2',
color: '#717171',
y: 33.6
}, {
name: 'Lian Li PC-B16 - geschl.',
color: '#717171',
y: 34.2
}, {
name: 'Lian Li PC-B16 - offen',
color: '#C10000',
y: 34.3
}, {
name: 'Fractal-Design Arc Midi R2',
color: '#717171',
y: 34.8
}, {
name: 'Lian Li PC-A79',
color: '#717171',
y: 34.8
}, {
name: 'Cooltek G3',
color: '#717171',
y: 35.1
}, {
name: 'Fractal-Design Arc-XL',
color: '#717171',
y: 35.1
}, {
name: 'Aerocool Mechatron',
color: '#717171',
y: 35.1
}, {
name: 'Lian Li PC-V650',
color: '#717171',
y: 35.3
}, {
name: 'Nanoxia DS 1',
color: '#717171',
y: 35.4
}],
dataLabels: { //Balkenbeschriftung
enabled: true,
rotation: 0,
color: '#FFFFFF',
align: 'right',
x: 0,
y: 0,
format: '{point.y:.1f} dB(A)', // Einheit der Balkenlinien
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
//textShadow: '0 0 3px black'
}
}
}]
});
});5v - JSFiddle