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

Posted 2023-05-09

【中文标题】Highcharts (PieChart) - 第二次绘制时图表宽度减小

【英文标题】：Highcharts (PieChart) - chart width reduced on drawing second time

【发布时间】：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 的问题非常普遍，您可以在此处找到与此问题相关的主题：***.com/questions/17206631/…

【参考方案1】：

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

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