Блог

Я создал форму для динамического изменения значений в моей диаграмме. Я могу изменить заголовок, субтитры и т.д., Но… Как я могу изменить, чтобы установить включенный или отключенный 3D-режим??

 $(document).ready(function () {

    //Title inputText
    $('#gra_title').blur(function(){
        chart.setTitle({ text: $('#gra_title').attr("value") });
    });

    //Subtitle inputText
    $('#gra_subtitle').blur(function(){
        chart.setTitle(null, { text: $('#gra_subtitle').attr("value") });
    });

    //Credits checkbox
    $('#gra_credits_visible').click(function () {
        if ($('#gra_credits_visible').is(':checked')){ 
            chart.credits.show();
        }else{
            chart.credits.hide();
        }
    });

.........  //More events to change chart

    //3D checkbox - MY PERSONAL BUG
    $('#gra_3d_visible').click(function () {
        if ($('#gra_3d_visible').is(':checked')){ 
            chart.options.chart.options3d.enabled = true;
        }else{
            chart.options.chart.options3d.enabled = false;
        }
        chart.redraw();
        // return TRUE or FALSE, but don't change 3D/2D mode
        alert(chart.options.chart.options3d.enabled);
    });


});
  

Это мой график:

 chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        marginRight: 0,
        events: {
            load: function () {
                this.credits.element.onclick = function () {
                    window.open('http://www.url.com', '_blank');
                }
            }
        },
        marginTop: 80,
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            viewDistance: 25,
            depth: 90
        }
    },
    plotOptions: {
        column: {
            depth: 90
        }
    },
    credits: {
        enabled: true,
        text: 'MyWeb.com',
        style: {
            cursor: 'pointer',
            color: '#909090',
            fontSize: '10px'
        }
    },
    title: {
        text: 'Población Mundial'
    },
    subtitle: {
        text: 'Fuente: Wikipedia.org'
    },
    xAxis: {
        title: {
            text: 'Continentes'
        },
        categories: ['Africa', 'América', 'Asia', 'Europa', 'Oceanía']
    },
    yAxis: {
        title: {
            text: 'Población (millones)'
        },
    },
    series: [{
        name: 'Año 1800',
        data: [107, 31, 635, 203, 2]
    }]
});
  

Я искал в документации API, но ничего не нашел.

К сожалению, вам нужно уничтожить и создать диаграмму, опция обновления для 3d недоступна.