2017-01-02 3 views
-1

Wie füge ich Hintergrundfelder in Liniendiagramm mit Highcharts hinzu?Highcharts Hintergrundoptionen

Typ: Liniendiagramm

enter image description here

+2

Verwenden Gitterlinien und kleinere Gitterlinien http://jsfiddle.net/g26xwgzp/. Siehe API für weitere Optionen http://api.highcharts.com/highcharts/yAxis.minorGridLineWidth – morganfree

+0

Danke Morgon. Ich versuchte mit der minorGridLineColor Option, aber es zeigt nur yAxis Linie nicht X-Achse. Fir x-axis Ich habe gridLineWidth verwendet: 1 Option, aber die horizontale Linie. aber Kastenbreite wird riesig sein, es ist nicht meine Anforderung. xAxis: {gridLineWidth: 1}, yAxis: {minorGridLineColor: '# E0E0E0', minorGridLineWidth: 2, minorTickLength: 0, minorTickInterval: 'auto'} – rafik

+0

Sie müssen Nebenrasterlinien für beide Achsen festlegen - xAxis und yAxis. Schau in die Geige, die ich oben im Kommentar gepostet habe. – morganfree

Antwort

0

Sie diese Art von Hintergrund von enabling plot lines for both x und y-Achse für Chart Grundstück hinzufügen könnte.

xAxis:[{ 
    gridLineWidth: 1 
}] // for yAxis grid lines are visible by default 

Demo: http://jsfiddle.net/0md5s7cz/

Alternativ können Sie ein Bild für background of a chart's plot area gesetzt.

chart: { 
    plotBackgroundImage: 'https://i.stack.imgur.com/BBTab.png' 
}, 

Demo: http://jsfiddle.net/4wLvu94s/1/

+0

Danke für Ihre schnelle Antwort. Eigentlich möchte ich kein Hintergrundbild hinzufügen. Mit gridLineWidth Optionen habe ich versucht, aber die Größe der Box ist groß. Eigentlich suche ich nach einer kleinen Box, die ich in meinem Anhang geteilt habe. – rafik

+0

@rafik In diesem Fall sehen Sie bitte den Kommentar von ** morganfree ** unter Ihrer Frage - minorGridLine sollte die Lösung für Sie sein. –

+0

Danke Kacper. Ich versuchte mit der minorGridLineColor Option, aber es zeigt nur yAxis Linie nicht X-Achse. Fir x-axis Ich habe gridLineWidth verwendet: 1 Option, aber die horizontale Linie. aber Kastenbreite wird riesig sein, es ist nicht meine Anforderung. xAchse: { Gridline: 1 }, yAchse: { minorGridLineColor: '# E0E0E0', \t minorGridLineWidth: 2, minorTickLength: 0, minorTickInterval: 'auto' } – rafik