Javascript Highcharts移动(和窗口)调整大小。轴重叠

Javascript Highcharts移动(和窗口)调整大小。轴重叠,javascript,highcharts,Javascript,Highcharts,下面的提琴显示了我的手机用户在纵向和横向旋转时发生的情况 加载时,图表会根据需要显示 点击“步骤1”,图表缩小并按需要显示 点击“步骤2”,图表返回到原始大小,但纵轴标签重叠 我尝试了chart.redraw(),但没有成功。有什么想法吗 $(function() { var chart = Highcharts.chart('container', { chart: { type: 'bar', renderTo:

下面的提琴显示了我的手机用户在纵向和横向旋转时发生的情况

  • 加载时,图表会根据需要显示
  • 点击“步骤1”,图表缩小并按需要显示
  • 点击“步骤2”,图表返回到原始大小,但纵轴标签重叠

我尝试了chart.redraw(),但没有成功。有什么想法吗

$(function() {
    var chart = Highcharts.chart('container', {
        chart: {
            type: 'bar',
            renderTo: 'industrybasicbar'
        },
        title: {
            text: 'All Private Industries Expected to Add Jobs by 2024'
        },

        xAxis: {
            categories: ['Health care and social assistance',   'Professional and business services',   'Trade, transportation, and utilities', 'Leisure and hospitality',  'Manufacturing',    'Construction', 'Local government', 'Financial activities', 'Other services',   'Natural resources and mining', 'Private educational services', 'State government', 'Information',  'Federal government'
    ],
            title: {
                text: null
            }
        },
        yAxis: {
            title: {
                text: null
            }
        },
        series: [{
            name: 'Projected Growth',
            data: [46300,   45700,  36200,  35800,  21100,  17600,  9600,   9100,   8800,   6100,   4700,   2800,   2000,   -1000
    ],
                    negativeColor: 'black'
        }]


});

    $('#resize').click(function () {
        chart.setSize(300, 300);
    });

    $('#resize2').click(function () {
       chart.setSize(500, 300);
    });

});

这似乎是一个错误。我在这里报告:

解决方法:

手动更新
textfoverflow

  $('#resize').click(function() {
    chart.setSize(300, 300);
    chart.xAxis[0].update({
      labels: {
        style: {
          textOverflow: 'ellipsis'
        }
      }
    });
  });
现场演示: