Question

这似乎是一个常见问题，但最后一个帖子已超过5年了。

出于某种原因，除非调整浏览器大小，否则我的HighCharts container无法正常呈现。这个问题出现不到一周前，我没有改变任何代码。令人沮丧！

有几个主题认为Highcharts库与JQuery库不兼容是一个问题，我确保两者都是最新的。我甚至已经回顾了所有可用的旧版JQuery，以确保这不是问题。

我不是很精通JS，所以如果你有一个建议（例如插入调整容器大小的行），你能否具体说明放置/语法的位置？谢谢！

这是我的JSfiddle的链接（它实际上正确渲染）
https://jsfiddle.net/a62f7z4z/

指向我网站的链接，显示所有浏览器的失真 https://reliance.investechs.com

Answer 1

你提到这个问题不久前出现了。你能告诉我你使用哪种Highcharts版本吗？尝试使用旧版本（例如code.highcharts.com/5.0.12/highcharts.js）并查看问题是否仍然存在。

Answer 2

此处的问题似乎是min-width container元素中的<div>属性。如果删除该属性，图表的图例将按预期显示（请参阅下面的屏幕截图，我使用检查工具将其删除）。

Highcharts本身具有响应性，因此它通常会将其放置的任何元素填充到100％。似乎放置一个最小宽度约束告诉图例项目不比你设置的宽（310像素）。

正如您所注意到的，每当您调整浏览器大小时，响应式代码都会根据窗口调整大小触发器接管并管理图表的维度。我认为这是导致您出现问题的首要负载设置。

我希望这对你有所帮助。

Answer 3

尝试这个小提琴，这将自动调整浏览器调整大小的高图

/*

    Notice the height is NOT set

*/

$(function() {

  Highcharts.Chart.prototype.is3d = function() {
    return this.options.chart.options3d && this.options.chart.options3d.enabled; // #4280
  };


  $('#ChartContainer2').highcharts({

    chart: {
      type: 'bar',
      options3d: {
        enabled: true,
        alpha: 15,
        beta: 15,
        viewDistance: 0,
        depth: 70
      },
      marginTop: 120,
      marginBottom: 120
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        pointWidth: 30 //width of the column bars irrespective of the chart size
      },
      bar: {
        depth: 50,
        height: 50,
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              var drilldown = this.drilldown;
              if (drilldown) { // drill down
                //alert(drilldown.TaskID + ' ' + drilldown.name);
                $("#PacingModal").modal('show');
              }
            }
          }
        },
        dataLabels: {
          enabled: true,
          //rotation: -90,
          inside: true,
          color: '#FFFFFF',
          //align: 'right',
          x: 40,
          y: 15,
          style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif',
            textShadow: '0 0 3px black'
          },
          formatter: function() {
            return this.y + '%';
          }
        }
      }
    },
    series: [{
      name: 'Not Complete',
      data: [{
        y: 5,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }

      }, {
        y: 3,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }, {
        y: 4,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }, {
        y: 7,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }, {
        y: 2,
        drilldown: {
          TaskID: 343434545252,
          name: 'somename'
        }
      }]
    }, {
      name: 'Clean Up',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Complete',
      data: [3, 4, 4, 2, 5]
    }]




  });

});

#ChartContainer2 {
  height: 100%;
  width: 100%;
  position: absolute;
}

<div id="ChartContainer2">

</div>

Fiddle link

所有broswers中的Highcharts渲染问题

3 个答案: