Question

我有一个使用highcharts饼图的页面，我正在尝试使用日期选择器下拉列表更新图表。我有一个类似的条形图实现，它的工作很棒。请注意（这是来自PHP类，因此连接和不连接）。

<script type='text/javascript'>

                    function drawPie(data)
                    {
                        var chart;
                        alert('called');
                        var options = {
                            chart: {
                                renderTo: 'PieChart',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                height: 350
                            },
                            title: {
                                text: 'Product Popularity'
                            },
                            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                                percentageDecimals: 1
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {enabled: false},
                                    showInLegend: true
                                }
                            },
                            series: [{
                                type: 'pie',
                                name: 'Product Popularity',
                                data: data

                            }]
                        }
                        chart = new Highcharts.Chart(options);
                        $('#ProductPieMod div.mod_content').css('height', $('#PieChart').css('height'));
                    }
                $(document).ready(function(){
                    drawPie(" . $this->get_data($this->date) . ");

                    $('#ProductPieMod_date').on('change', function(){
                        var val = parseInt($(this).val());
                        switch(val)
                        {
                            case 0:
                                var date = Date.today();
                                break;
                            case 1:
                                var date = Date.parse('last week');
                                break;
                            case 2:
                                var date = Date.today().moveToFirstDayOfMonth();
                                break;
                            case 3:
                                var date = Date.parse('January').moveToFirstDayOfMonth();
                                break;
                            default:
                                var date = Date.today();
                        }
                        var info;
                        $.ajax({
                            type: 'POST',
                            url: '". matry::base_to('utilities/dhs/manager_dash') . "',
                            async: false,
                            dataType: 'json',
                            data: {date: date.toString('M/dd/yyyy'), module: 'ProductPieMod'},
                            success: function(data)
                            {
                                drawPie(data);  
                            }
                        });

                    });
                });
                </script>

我的ajax返回以下字符串：

[['FASTCLIX LANCING DEVICE', 62.5],['FREESTYLE LANCING DEVICE', 25],['ONETOUCH DELICA LANCING DEVICE', 12.5]]

此外，此图表最初使用完全相同的方法构建，就好了。它正好在我使用下拉（运行onChange事件）时它会中断。

更新我也为此创造了一个小提琴：http://jsfiddle.net/SHReZ/1/

Answer 1

Firts，您需要将chart var放到document.ready处理程序范围，接下来，您需要在绘制之前销毁图表。

$(document).ready(function () {
    var chart;

    function drawPie(data) {
        console.log('called');
        var options = {
            chart: {
                renderTo: 'PieChart',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                height: 350
            },
            title: {
                text: 'Product Popularity'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Product Popularity',
                data: data
            }]
        };
        if (chart !== undefined) chart.destroy();
        chart = new Highcharts.Chart(options);
        $('#ProductPieMod div.mod_content').css('height', $('#PieChart').css('height'));
    }


    drawPie([
        ['ONETOUCH DELICA LANCING DEVICE', 27.78],
        ['FREESTYLE LANCING DEVICE', 20.83],
        ['Nova Max Ketone Test Strips Health and', 11.11],
        ['ONETOUCH ULTRASOFT LANCING DEVICE 2PK', 11.11]
    ]);
    //get data from https://gist.github.com/zba/4712055 , delay 4
    $.post('/gh/gist/response.html/4712055', {
        delay: 4
    }, function (data) {
        drawPie(data);
    }, 'json');

});

fiddle

同样here是演示，它不会破坏图表，但它会改变颜色

来自Ajax的Highcharts饼图

1 个答案: