Highcharts x-Achsen-Kategorie überlappen

Die Termine überlappen sich in x-Achsen-bar auf der Unterseite. Was ist die beste Lösung, um dieses Problem beheben?

Wenn das Datum zählen, ist über 13, dann bin ich fein mit keine Kategorie Etiketten, aber Brauch ich wenigstens die Daten auf den Punkt mouseover.

Ich habe versucht, die formatter-Funktion, aber es funktioniert nicht, es gibt mir zahlen und nicht auf einen Datumsbereich.

 xAxis: {
      categories:{
           formatter: function() {
               ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
           }
      }
 },

Habe ich einen jsfiddle um Ihnen zu zeigen, wie es aussieht.

http://jsfiddle.net/8eTnE/

InformationsquelleAutor prospector | 2013-07-19

highcharts jquery

3

geändert haben, dass code,
```
        tickInterval : 2,
        labels : { y : -15, rotation: -45, align: 'right' }
```
FIDDLE DEMO

Nur prüfen, ist, dass akzeptabel ist, können Sie das gleiche tun für die Y-Achse zu. spielen Sie einfach mit
labels : { y : -15, Drehung: -45, align: 'right' } - Werte. Sie getan werden sollte.

InformationsquelleAutor RONE

Hier sehen Sie eine bessere Leistung

http://jsfiddle.net/8eTnE/2/

hinzufügen ,label in der x-Achse als

labels: {
                    rotation: -45,
                    align: 'right'

                }

increse mmarginbottom 75 im chart, die als

 marginBottom: 75

hier ist der vollständige code

  $(function () {

        var curdateVar = "04/01/2013";
        var dateinreq = "04/01/2013";
        var csdataArr = null;
        //var data = [0,0,0,0,0,0,0];
        var data1 = new Array(6);
        var data2 = new Array(6);


        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'containermain',
                    type: 'line',
                    backgroundColor: {
                        linearGradient: [0, 0, 250, 500],
                        stops: [
                                                                   [0, '#bbb'],
                                                                   [0.05, '#fff'],
                                                                   [1, 'white']
                        ]
                    },
                    borderColor: '#000000',
                    borderWidth: 2,
                    className: 'dark-container',
                    marginRight: 130,
                    marginBottom: 75
                },
                title: {
                    text: 'Activity Stats',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Calories Burned',
                    x: -20
                },
                xAxis: {
                    categories: ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
                    ,labels: {
                rotation: -45,
                align: 'right'

            }
                        },
                        yAxis: {
                            title: {
                                text: 'Calories'
                            },
                            min: 0,
                            max: 2000,
                            tickInterval: 50,
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                        tooltip: {
                            formatter: function () {
                                // return '';
                                return '<b>' + this.series.name + '</b><br/>' +
                                this.x + ': ' + this.y + 'cals';
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: [{
                            name: 'Activity',
                            data: [120       ,473       ,473       ,0         ,142       ,509       ,296       ,398       ,558       ,136       ,98        ,330       ,355       ,289       ]
                        /* data: data1]*/
                    }]
                    });
                });

    });

finden Sie weitere Formatierung aus Demo

InformationsquelleAutor Bhaarat

Schritt die option, Sie zu überwinden das problem der überlappung von Beschriftungen in x-Richtung

    xAxis: {
        categories:{
            formatter: function() {
                ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013']
            }
        },
        labels: {
            **step: 2**
        }
    }

InformationsquelleAutor shammerw0w

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.