Wie man highcharts horizontal scrollbare, wenn mit großer Reichweite in x-Achse

Bin ich generieren meinen x-Achse und y-Achse-Daten dynamisch und Anzeige von highcharts, aber das Diagramm wird chaotisch, wenn die x-Achsen-Bereich ist hoch, mit kleinen Abständen.

Wie mache ich highcharts, um normale horizontal scrollbaren Graphen?

Hier ist, was ich im Augenblick verwende:

Wie man highcharts horizontal scrollbare, wenn mit großer Reichweite in x-Achse

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

//CODE FOR HIGHCHARTS JS
function makeChart() {
    $('#container').highcharts({
        chart: {
            type: 'line',
            marginRight: 130,
            marginBottom: 100
        },
        title: {
            text: 'Banana',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: banana.com',
            x: -20
        },
        xAxis: {
            categories: xlist
        },
        yAxis: {
            title: {
                text: 'No. of C'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: 'C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: $("#repoSelector option:selected").text(),
            data: ylist
        }]
    });
}
Ich versuchte Lösung ist, aber es dint Arbeit. stackoverflow.com/questions/8518686/...

InformationsquelleAutor scottydelta | 2013-05-23

  1. 18

    Zwei Möglichkeiten, das zu erreichen eine scroll-Leiste.

    Option 1

    Müssen Sie highstock.js und, anstatt das Rendern ein Kursdiagramm, haben Sie zum Rendern einer highchart.

    Aktivieren Sie dann die Bildlaufleiste

      scrollbar: {
        enabled: true
    }

    Überprüfen Sie die API für die Bildlaufleiste und damit verbundene Tätigkeiten here.

    Here Habe ich fummelte ein Beispiel.

    Option 2

    Versuchen Sie min & max Attribute der x-axis.

    xAxis: {
            categories: [...],
            min: 0,
            max:9
}

    Zeigt 10 Kategorien in der x-Achse am Stück, hinzufügen von Blättern für die übrigen Kategorien.
    finden fummelte Beispiel here.

    ich habe versucht es Bearbeiten, in der fiddle-nach meinen müssen, sondern seine nicht funktioniert: jsfiddle.net/kUSyF/4
    Es gibt ein paar Dinge, wie eine extra ',' am Ende der Serie und verpasste '}], " am Ende der Serie. Ich habe deine bearbeiteten chart hier . jsfiddle.net/gopinaghr/kUSyF/5
    wenn diese meine Arbeit zu tun, aber es wäre besser gewesen, wenn ich könnte, zu entfernen zoom-und machen es Scrollbar, d.h. der erste Auftritt sollte normal ohne x-Achsen-element überlappen.
    Set min und max Menge der Kategorien jsfiddle.net/kUSyF/7
    Grund für downvote ?

    InformationsquelleAutor Gopinagh.R

  2. 2

    Aktivieren der Bildlaufleiste in der x-Achse, versuchen Sie, diese

    xAxis: {
  categories: xlist,
  min: 0,
  max: 4,
  scrollbar: {
        enabled: true
  },
  },

    Überprüfen Sie die jfiddle hier: https://jsfiddle.net/BhavyaAprajita/zja90wf2/1/

    Stellen Sie außerdem sicher, dass Sie importieren die highstock-Bibliothek

    src="https://code.highcharts.com/stock/highstock.js"

    InformationsquelleAutor Bhavya Aprajita

Schreibe einen Kommentar