55

我在 Zurb 的 Foundation 框架中使用 Highcharts 进行类项目。我在一个部分选项卡中有三个图表。一个在 12 列 div 内，另外两个在 6 列 div 内的同一行。

当页面加载时，特色图表不会占用 12 列的可用宽度，两个较小的图表会溢出它们的 6 列。但是，当调整窗口大小或我尝试使用 Inspect 元素进行调查时，图表会立即捕捉到正确的尺寸。此行为发生在 Chrome、FF 和 IE 中。

我意识到我可以设置一个特定的宽度，但我真的很想利用 Foundation 并让它们保持响应。

我已经调整了 CSS 和 Highcharts 初始化，但我很难过。有没有其他人遇到过这个问题？谁能看到我错过了什么？

这是我的 HTML 的摘录：

<div class="row">
<div class="twelve columns">
    <!--begin tabs below--> 
    <div class="section-container tabs" data-section="tabs">
      <section>
        <p class="title" data-section-title><a href="#">Heart Disease</a></p>
        <div class="content" data-section-content id="heart">

            <div class="row feature-chart">
                <div class="large-12 columns">
                    <div id="heartTimeline-container">
                    <div id="heartTimeline"></div>
                    </div>
                </div> <!--close 12 columns-->
            </div> <!--close row-->
            <div class="row small-charts">
                <div class="large-6 columns">
                    <div id="heartDemo"></div>
                </div>
                <!--close 6-->
                <div class="large-6 columns">
                    <div id="heartStages"></div>
                </div>
                <!--close 6-->
            </div>
            <!--end row-->
        </div>
      </section>
   </div>
   </div>
   <!--end twelve columns-->

这是Highcharts js：

$(function () {
    Highcharts.setOptions({
        colors: ['#1A1A1A', '#455D78', '#BDCCD4', '#999999', '#B3B3B3', '#F2F2F2']
    });
    $('#heartTimeline').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'Heart Disease Death Rates in the U.S.from 1980-2010'
        },
        subtitle: {
            text: 'Source: <a href="http://www.mdch.state.mi.us/pha/osr/deaths/Heartdx.asp">'+ 
                        'Michigan Department of Community Health</a>'
        },
        xAxis: {
            labels: {
                formatter: function() {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Heart Disease Death Rate Per 100,000 People'
            },
            labels: {
                formatter: function() {
                    return this.value / 1 +'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>deaths per hundred thousand people in {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: 1980,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Heart Disease',
            data: [412.1, 397, 389, 388, 378, 375, 365.1, 355.9, 352.5, 332, 321.8, 313.8, 306.1, 309.9, 299.7, 296.3, 288.3, 280.4, 272.4, 267.8, 257.9, 247.8, 240.8, 232.3, 217, 211.1, 200.2, 190.9, 186.5, 180.1, 178.5]
        }, ]
    });
});
$(function () {
    $('#heartDemo').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Most Prevelant Causes and Effects of Heart Disease 2013'
        },
        subtitle: {
            text: 'Source: http://circ.ahajournals.org (The American Heart Association)'
        },
        xAxis: [{
            categories: ['Smoking', 'Obesity (BMI > 25 kg) ', 'Total cholesterol > 200 mg)', 'High Blood Pressure', 'Diabetes Mellitus', 'Prediabetes', 'Total Cardiovascular Disease', 'Stroke', 'Coronary Heart Disease', 'Heart Failure'],
            labels: {
                rotation: -90,
                align:'right'
            }
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                formatter: function() {
                    return this.value +'%';
                },
                style: {
                    color: '#000000'
                }
            },
            title: {
                text: 'Men',
                style: {
                    color: '#BDCCD4'
                }
            },
            opposite: true

        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Both Sexes',
                style: {
                    color: '#455D78'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' %';
                },
                style: {
                    color: '#4572A7'
                }
            }

        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Women',
                style: {
                    color: '#AA4643'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' %';
                },
                style: {
                    color: '#AA4643'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 80,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Both Sexes',
            color: '#455D78',
            type: 'column',
            yAxis: 1,
            data: [19, 68.2, 43.4, 33, 8.3, 38.2, 35.3, 2.8, 6.4, 2.1],
            tooltip: {
                valueSuffix: ' %'
            }
        }, {
            name: 'Women',
            type: 'spline',
            color: '#AA4643',
            yAxis: 2,
            data: [16.7, 63.7, 44.9, 32.2, 7.9, 30.5, 34, 3, 5.1, 1.8],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' %'
            }
        }, {
            name: 'Men',
            color: '#BDCCD4',
            type: 'spline',
            data: [21.3, 72.9, 41.3, 33.6, 8.7, 46, 36.7, 2.6, 7.9, 2.5],
            tooltip: {
                valueSuffix: ' %'
            }
        }]
    });
});

$(function () {
    $('#heartStages').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Number of Deaths for Different Types of Heart Diseases in the U.S. for 2008'
        },
        subtitle: {
            text: 'Source: <a href="http://www.nhlbi.nih.gov/resources/docs/2012_ChartBook_508.pdf">'+ 
                'Morbitity & Mortality: 2012 Chart Book on Cardiovascular, Lung and Blood Disease</a>'
        },
        xAxis: {
            categories: [
                'Coronary Heart Disease',
                'Heart Attack',
                'Cardiomyopathy',
                'Stroke',
                'Atrial Fibrillation and Flutter',
                'Heart Failure',
                'Diseases of Pulmonary Circulation',
                'Pulmonary Embolism',
            ],
            labels: {
                rotation: -90,
                align:'right'
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Heart Disease Diagnostic Category (thousands)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Heart Disease Related Deaths for 2008',
            data: [405.309, 133.958, 23.932, 134.148, 15.383, 56.830, 12.927, 7.158]

        }]
    });
});
4

12 回答 12

38

我从另一个答案中得到了这个，所以在这个问题中给 thegreyspot 一些信任。

解决方案：$(window).resize();在加载图表后调用（或者当你用数据填充它时）

于 2013-08-15T14:11:27.467 回答
21

只需使用该chart.reflow()功能

于 2016-06-02T16:11:41.243 回答
18

请使用响应式高图查看这些示例：

http://jsbin.com/anuqav/1/edit

http://jsfiddle.net/2gtpA/show/

<div id="container" style="width:100%;margin: 0 auto"></div>
于 2013-04-24T13:54:26.210 回答
9

这可能会有所帮助：

$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height); 
  });
于 2015-10-19T12:12:13.143 回答
4

对我来说，它需要一些延迟并触发窗口调整大小。

window.setTimeout(function(){ $(window).trigger('resize'); }, 500);
于 2017-10-26T08:29:43.080 回答
2

您可以添加一个事件侦听器，以便您的图表在每次重绘时调整大小：

mychart = new Highcharts.stockChart('div',   {
    chart: {
        events: {
            redraw: function(e) {
                mychart.reflow();
            }
        }
    },
于 2018-07-11T18:42:16.613 回答
2

在纯javascript中，单页调整多个图表窗口调整大小问题

 window.onresize = function() {
    //- Remove empty charts if you are using multiple charts in single page 
    //- there may be empty charts
    Highcharts.charts = Highcharts.charts.filter(function(chart){
        return chart !== undefined;
    });

    Highcharts.charts.forEach(function(chart) {
        var height = chart.renderTo.chartHeight;
        //- If you want to preserve the actual height and only want to update 
        //- the width comment the above line.
        //- var height = chart.chartHeight; 
        var width = chart.renderTo.clientWidth;
        //- The third args is an animation set to true. 
        chart.setSize(width, height, true);
    });
};

我们也需要这个 css 代码

.highcharts-container {
    width: 100%;
}
.highcharts-container svg {
    width: 100%;
    display: flex;
}
于 2019-09-05T12:00:30.097 回答
1

您可以将此代码用于示例

var chart;
$(function() {
  var newh = $("#container").height();
    $( window ).resize(function() {
    newh = $("#container").height();
    chart.redraw();
    chart.reflow();
  });
  chart = new Highcharts.Chart();
})

http://jsfiddle.net/Behseini/qheh4w0n/

于 2017-02-28T15:51:11.800 回答
1

现在有点老话题了，但我在 IE8 上遇到了这个问题。在撰写本文时，当前的 IE 版本是 IE10，但我需要使我的网站与早期版本兼容。对我有用的解决方案是上述和其他人们谈论他们实施的解决方案的网站的组合。我进行了 settimeout 加上调整大小并刚刚为 IE8 执行，我希望这可以帮助像我这样试图找到解决方案几个小时的其他人。

您可能会发现只有脚本部分是您需要的唯一部分。

<!--[if IE 8]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <script>
    function timeout() {
        $(window).resize();
    }
    window.setTimeout(function() {
        timeout();
    },2000);
  </script>
  <style>
    .highcharts-container{width:100% !important; height:100% !important;}
  </style>
<![endif]-->
于 2015-12-23T11:58:20.873 回答
0

只想添加另一个解决方案：

$('.chart').highcharts(options, function(chart) {
  setTimeout(function() {
    chart.reflow();
  });
});

它所做的是在渲染后将图表重排到下一帧。

于 2017-06-23T18:50:56.547 回答
0

只有这对我有用

$(window).resize(function(){ 
    $scope.chartConfig.getChartObj().reflow() 
});
于 2017-04-06T20:13:50.747 回答
-3 
$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height);
    });

这个对我有用

于 2017-02-28T14:18:13.263 回答