wake-up-neo.com

HighCharts-Ausgabe in voller Breite

Ich versuche, dass mein gerendertes Diagramm 100% des übergeordneten div ohne Erfolg ausfüllt. Gibt es eine Möglichkeit, die Lücke auf der linken und rechten Seite zu entfernen?

http://jsfiddle.net/sKV9d/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: 300,
        height: 200,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});
javascriptjqueryhighcharts
9
user2341636

Wenn Sie die Optionen width: 300, height: 200 wie folgt entfernen:

    var chart = new Highcharts.Chart({
chart: {
    renderTo: 'chart',
    margin: 0,
    defaultSeriesType: 'areaspline'
},    

...

der Behälter wird automatisch gefüllt.

12
MISJHA

Das Problem liegt an der Jquery-Benutzeroberfläche. Rufen Sie nach dem Rendern Ihres Diagramms diesen Code auf, um das Diagramm neu zu fließen. Das hat mein Problem behoben

chart.reflow();
10
philip mudenyo

Setzen Sie minPadding und maxPadding auf 0, siehe: http://jsfiddle.net/sKV9d/3/

6
Paweł Fus

Ich habe es durch gelöst

window.dispatchEvent(new Event('resize'));

UPD:

  1. breiten- und Höhenattribute entfernen.
  2. fügen Sie in .css den folgenden Code hinzu, um den Diagrammblock auf 100% von #container einzustellen:

diagramm {Breite: 100%; Höhe: 100%; }

2a. Eine andere Möglichkeit ist - falls es nicht möglich ist, die Containergröße während der "Entwurfszeit" zu definieren, können Sie das Diagramm nach dem Laden des Diagramms umfließen (d. h. rufen Sie chart.reflow () auf.):

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

Siehe Beispiel http://jsfiddle.net/yfjLce3o/

5
Andriy B.

Versuche dies :

var height= $("#container").height();
var width= $("#container").width();

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});
5
Duc Anh

Das Problem mit Highcharts wurde bereits gemeldet hier . Um damit fertig zu werden, können wir etwas tun, wie oben erwähnt. Ich hatte auch das gleiche Problem, also habe ich es mit gelöst

window.dispatchEvent(new Event('resize'));

nach dem Rendern meines Diagramms wie folgt:

this.chartData={
...     //some required data object to render chart
}

 Highcharts.stockChart('divContainerID', this.chartData, function (chart) {});
 window.dispatchEvent(new Event('resize'));
2
Anup Bangale

Wenn Sie dem Diagramm keine width -Eigenschaft zur Verfügung stellen, sollte es automatisch die Breite des Containers erhalten. Entfernen Sie also einfach die Breite aus dem Diagramm und geben Sie dem Container width: 100%.

Wenn Sie eine bestimmte Breite wünschen, ändern Sie einfach die Breite des Containers auf eine bestimmte Größe. Das Diagramm sollte immer noch 100% dieser Größe sein. JSFiddle

Beispiel:

HTML

<div id="container">
    <div id="chart"></div>
</div>

JS

    var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'chart',
        margin: 0,
        height: 200,
        defaultSeriesType: 'areaspline'
    },

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],

        marker: {
            enabled: false
        }
    }]
});

CSS

#container {
    width: 100%;
    height: 200px;
}
1
Shahar

einfach nur CSS hinzufügen

.highcharts-container{
  width: 100% !important;
}

.highcharts-root{
  width: 100% !important;
}
1
Andreas Septian

verwenden Sie die updateChart-Funktion und rufen Sie chart.reflow () in dieser Funktion auf

scope.updatechart = function(){
     scope.chart.reflow();
}

aufruf der updatechart-Methode alle 30 Sekunden mit einem beliebigen Aktualisierungsmechanismus

0
MukulChakane