Как я могу сделать отзывчивые заголовки в Highcharts?

Kris спросил: 14 ноября 2017 в 06:01 в: javascript

Я пытаюсь сделать так, чтобы заголовок моей кольцевой диаграммы хай-чартов был адаптивным - вот мой текущий jsFiddle: https://jsfiddle.net/klstack3/43Lqzznt/2/

HTML

<div class="wrapper">
<div id="container" style="width:100%;height:100%;"></div>

CSS

.highcharts-title {
font-weight: bold;

Javascript р >

$(function () {
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
   },
    title: {
        text: "I want this to be responsive",
                    margin: 10,
        align: 'center',
        verticalAlign: 'middle',    },
    tooltip: {
        pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',        }
    },
    series: [{
        type: 'pie',
                    data: [{
        name: 'Item',
        y: 81.52,
        sliced: true,
        selected: true
    }, {
        name: 'Item',
        y: 2.91,
    }, {
        name: 'Item',
        y: 4.07
    }, {
        name: 'Item',
        y: 2.07
    }, {
        name: 'Item',
        y: 9.44
    }],
    innerSize: '50%',
    }]
});$(window).resize(function(){
    var chart = $('#container').highcharts();    console.log('redraw');
    var w = $('#container').closest(".wrapper").width()
    // setsize will trigger the graph redraw 
    chart.setSize(       
        w,w * (3/4),false
    );
 });

Размер диаграммы изменяется в браузере, но я не могу заставить заголовок сделать то же самое - он просто перекрывает диаграмму. Любая помощь будет высоко ценится!

0 ответов