Highcharts (PieChart) - 第二次绘制时图表宽度减小

Question

首先要感谢 HighCharts。好吧，我正在 jQuery Mobile 中使用 HighCharts 构建饼图。

我正在显示几个饼图（最多 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. 宽度减小 - 单击按钮时加载

顺便说一句，我有两个 div，一个有几个过滤器和一个提交按钮，另一个是显示的图表。当我需要显示基于过滤器的图表并在 ajax 响应中显示时，我还隐藏了显示图表的 div。

JSFIDDLE

提前致谢。

Answer 1

问题在于 <div> 的隐藏。我用 jQuery 的 hide() 函数

隐藏了 div

请为 Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

寻找类似的答案

Highcharts (PieChart) - 第二次绘制时图表宽度减小

Highcharts (PieChart) - chart width reduced on drawing second time

jquery

charts

android

highcharts

jquery-mobile