Question

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

我正在显示几张饼图（最多6张图表），这些饼图是根据响应数据在Ajax成功回调中动态创建的。最初在 document.ready（） 中调用Ajax，并在单击按钮时调用Ajax。

在从 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） - 第二次抽奖时图表宽度减少

1 个答案: