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

【问题标题】：Highcharts (PieChart) - chart width reduced on drawing second timeHighcharts (PieChart) - 第二次绘制时图表宽度减小
【发布时间】：2016-12-11 20:55:56
【问题描述】：

首先感谢 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

提前致谢。

【问题讨论】：

你试过给你的馅饼增加尺寸吗？它可能会帮助您解决问题：api.highcharts.com/highcharts#plotOptions.pie.size
@GrzegorzBlachliński：让我试试……
@GrzegorzBlachliński：还是一样.. :(
你能展示这个问题的实例吗？喜欢 jsFiddle？
您好，主持人，感谢您提供的所有信息，他们真的很有帮助。隐藏 div 的问题非常普遍，您可以在此处找到与此问题相关的主题：stackoverflow.com/questions/17206631/…

标签： android jquery jquery-mobile charts highcharts

【解决方案1】：

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

请为Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?找到类似的答案

【讨论】：