Question

HTML

    <div id="top10_" style="float:left">
        <strong>Top10:</strong>
        <select id="top10_update">
            <option value="typ">Typ</option>
            <option value="kategoria">Kategoria</option>
            <option value="typ2 selected="selected" >Typ2</option>
            <option value="usluga">usługa</option>
        </select>

        <img id="set_column" src="static/images/chart-bar-icon.png" width="20" />
        <img id="set_pie"  src="static/images/chart-pie-icon.png" width="20" />
        <img id="set_area"  src="static/images/Chart-Graph-Ascending-icon.png" width="20" />
        <img id="set_line"  src="static/images/chart_curve.png" width="20" />

    </div>
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>

JS

$('#set_column').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "column"});
});
$('#set_pie').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "pie"});
});
$('#set_area').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "area"});
});
$('#set_line').click(function() {
    var chart = $(this).parent('div').attr('id');
    chart = chart.replace('_','');
    $('#'+chart).highcharts().series[0].update({ type: "line"});
});

和图表

$('#top10').highcharts({
    chart: {
        type: 'column',
        margin: [ 50, 50, 100, 80]
    },
    title: {
        text: 'TOP10'
    },
    subtitle: {
        text: ' '
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: [],
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
    yAxis: {
        min: 0,
            title: {
                text: 'Ilość'
            }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return '<b>'+ this.x +'</b><br/>'+
                'Ilość: '+ this.y;
        }
    },
    series: [{
        name: 'Ilość, TOP10',
        data: [],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            x: 4,
            y: 10,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
        }
    }]
});

因为你可以看到它有空数据，因为数据是用ajax动态加载的

function ajax_update(date) {
    $.ajax({
        url: "index.php/ajax",
        async: false,
        method: 'post',
        dataType: "json",
        data: {date:date},
        beforeSend: function(){
            $('#loading').show();
            $('#top10').highcharts().showLoading();
        },
        success: function(dane) {
            $('#top10').highcharts().xAxis[0].setCategories(dane.top10.xlabel, false);
            $('#top10').highcharts().series[0].setData(dane.top10.data);
            $('#top10').highcharts().setTitle(null, { text: 'Dane za: '+date.replace('^', ' - ') });

            $('#top10').highcharts().hideLoading();
            $('#loading').hide();
        },
        error: function (dane) {
            alert( dane.responseText );
        }
    });
}

问题是，当我点击图标更改图表上的图表数据类型消失时，使用上述功能更新它时会再次显示修改后的类型

直播，工作示例在这里：http://jsfiddle.net/zqvNq/1/ 但正如我所说，我有空数据并将其附加到json图表

Answer 1

这是我如何解决这个问题的例子：

var global_highcharts = new Object();
    function ajax_update_chart(level, date, co) {
        $.ajax({
            url: "index.php/ajax/"+co,
            async: false,
            method: 'post',
            dataType: "json",
            data: {date:date, level:level},
            beforeSend: function(){
                $('#loading').show();
                $('#'+co.substr(7)).highcharts().showLoading();
            },
            success: function(dane) {
                $.each(dane, function(i) {
                    global_highcharts[i+'Cat'] = this.categories;
                    global_highcharts[i+'Dat'] = this.data;

                    $('#'+i).highcharts().xAxis[0].setCategories( this.categories, false );
                    $('#'+i).highcharts().series[0].setData( this.data );
                    $('#'+i).highcharts().hideLoading();
                });
                //ustawiamy domyślne wartości które w main.php mają ustawione selected aby nie mylić ludzi na stronie
                $('#loading').hide();
                //console.log( global_highcharts );
            },
            error: function (dane) {
                alert( dane.responseText );
            }
        });
    }

$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function (i, type) {
    $('#' + type).click(function () {
        var chartaz = $('#top10').highcharts();
        chartaz.series[0].update({
            type: type
        });
            $('#top10').highcharts().xAxis[0].setCategories( global_highcharts.top10Cat , false);
            $('#top10').highcharts().series[0].setData( global_highcharts.top10Dat );
    });
});

再次追加数据

Highchart，动态更改图表类型

1 个答案: