Highcharts (PieChart) - Diagramm Breite reduziert beim Zeichnen zum zweiten Mal

Question

Vor allem dank HighCharts .. Nun, ich baue ein Kreisdiagramm mit HighCharts in jQuery Mobile.

Ich zeige nur wenige Kreisdiagramme (max. 6 Diagramme) an, die in Abhängigkeit von den Antwortdaten dynamisch in einem Ajax-Erfolgsrückruf erstellt werden. Der Ajax heißt zunächst in document.ready() und auch auf einen Button klicken.

Während der Erstellung der Kreisdiagramme von document.ready() alle horizontal Charts zeigt auf dem Bildschirm zentriert, was ein erwartetes Ergebnis. Aber beim nächsten Mal, wenn es von der Schaltfläche Klick erstellt wird, bewegt es sich nach links, dh seine Breite ist reduziert als es auf document.ready() angezeigt wurde.

Ich erstelle jeden Container <div id="container-x"></div> für die Kreisdiagramme dynamisch.
Hier ist der Beispielcode, den ich verwendet habe, um das Diagramm zu erstellen. Der dataArray ist der Datensatz, der zum Zeichnen des Kreisdiagramms verwendet wird.

$('#container' + i).highcharts({ 
chart: { 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false, 
    type: 'pie', 
    marginBottom: 150, 
    marginLeft: 20 
}, 
title: { 
    text: '' 
}, 
tooltip: { 
    pointFormat: '<b>{point.y:.0f}</b>' 
}, 
plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     showInLegend: true, 
     dataLabels: { 
      enabled: true, 
      useHTML: true, 
      formatter: function() { 
       return Math.round(this.percentage * 100)/100 + '%'; 
      }, 
      style: { 
       fontWeight: 'bold', 
       color: 'black' 
      } 
     } 
    } 
}, 
legend: { 
    layout: 'vertical', 
    align: 'left', 
    verticalAlign: 'bottom', 
    useHTML: true, 
    maxHeight: 135, 
    itemMarginTop: 2, 
    itemMarginBottom: 2, 
    labelFormatter: function() { 
     var words = this.name.split(/[\s]+/); 
     var numWordsPerLine = 4; 
     var str = []; 
     for (var word in words) { 
      if (word > 0 && word % numWordsPerLine == 0) { 
       str.push('<br>'); 
      } 
      str.push(words[word]); 
     } 
     return (str.slice(0, str.length - 2)).join(' '); 
    }, 
    navigation: { 
     activeColor: '#3E576F', 
     animation: true, 
     arrowSize: 12, 
     inactiveColor: '#CCC', 
     useHTML: true, 
     style: { 
      fontWeight: 'bold', 
      color: '#333', 
      fontSize: '12px' 
     } 
    } 
}, 
series: [{ 
    name: 'Brands', 
    colorByPoint: true, 
    data: dataArray 
}] 
}); 

Anbringen der beiden Bildschirme unter

1. erwartet - zunächst geladen Kreisdiagramm

2. Breite reduziert - geladen auf die Schaltfläche klicken

BTW, Ich habe zwei divs, eins mit wenigen Filtern und einem Submit-Button und anderen ist das Diagramm, das angezeigt wird. Verstecke auch das div, das Diagramm anzeigt, wenn ich ein filterbasiertes Diagramm anzeigen und auf der Ajaxantwort anzeigen muss.

JSFIDDLE

Vielen Dank im Voraus.

Answer 1

Das Problem ist mit dem Verbergen der <div>. Ich versteckte die div mit jQuery hide() Funktion

finden Sie eine ähnliche Antwort für Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?