[highcharts] Отзывчивые высокочастотные диаграммы не правильны, пока не изменится размер окна



Answers

Пожалуйста, ознакомьтесь с этими примерами с отзывчивыми диаграммами:

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

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

<div id="container" style="width:100%;margin: 0 auto"></div>
Question

Я использую Highcharts в рамках Foundation Zurb для проекта класса. У меня есть три диаграммы на вкладке раздела. Один находится в пределах 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]

                }]
            });
        });



Это может помочь:

$(Highcharts.charts).each(function(i,chart){
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height); 
  });



Просто хочу добавить другое решение:

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

То, что он делает, - это оплавление графика следующего кадра после его рендеринга.




Вы можете использовать этот код для примера

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/






Related