Highcharts (PieChart) - ширина диаграммы уменьшена при рисовании во второй раз

Прежде всего спасибо HighCharts. Ну, я создаю круговую диаграмму с использованием HighCharts в jQuery Mobile.Highcharts (PieChart) - ширина диаграммы уменьшена при рисовании во второй раз

Я показываю несколько круговых диаграмм (максимум 6 диаграмм), которые динамически создаются в обратном вызове Ajax в зависимости от данных ответа. Ajax называется первоначально в document.ready() а также при нажатии кнопки.

При создании круговых диаграмм с document.ready(), все диаграммы отображает горизонтально по центру на экране, что является ожидаемым результатом. Но в следующий раз, когда он создается из нажатия кнопки, он перемещается немного слева, т. Е. Его ширина уменьшается, чем была показана на document.ready().

Я создаю каждый контейнер <div id="container-x"></div> для круговых диаграмм динамически.
Вот пример кода, который я использовал для создания диаграммы. Данные dataArray - это набор данных, используемый для построения круговой диаграммы.

$('#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 
}] 
});

Подключение двух экранов ниже

1. ожидаемый - первоначально загружен круговой диаграммы

2. ширина уменьшена - грузится на кнопку мыши

Btw, У меня есть два div, один с несколькими фильтрами и кнопка отправки, а другая - диаграмма, которая отображается. Также скрываю div, который отображает диаграмму, когда мне нужно отобразить диаграмму на основе фильтра и отображать на ответ ajax.

JSFIDDLE

Спасибо заранее.

источник

2016-08-05 sadiqmc

Вы пытались добавить размер к вашей пироге? Это может помочь вам в вашей проблеме: http://api.highcharts.com/highcharts#plotOptions.pie.size –

@ GrzegorzBlachliński: Позвольте мне попробовать это ... – sadiqmc

@ GrzegorzBlachliński: Его все тот же .. :( – sadiqmc