Php 来自Ajax的Highcharts饼图

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

函数drawPie（数据）
{
var图；
警报（“被呼叫”）；
变量选项={
图表：{
renderTo:‘PieChart’，
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
身高：350
},
标题：{
文字：“产品知名度”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage}%”，
百分比小数：1
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
dataLabels:{enabled:false}，
showInLegend：对
}
},
系列：[{
键入“pie”，
名称：“产品知名度”，
数据：数据
}]
}
图表=新的高点图表。图表（选项）；
$（'ProductPieMod div.mod_content'）.css（'height'，$（'PieChart'）.css（'height'）；
}
$（文档）.ready（函数（）{
drawPie（“.$this->get_data（$this->date）”；
$（'ProductPieMod_date'）。在（'change'，function（）上{
var val=parseInt（$（this.val（））；
开关（val）
{
案例0：
var date=date.today（）；
打破
案例1：
var date=date.parse（'last week'）；
打破
案例2：
var date=date.today（）.moveToFirstDayOfMonth（）；
打破
案例3：
var date=date.parse（'一月'）.moveToFirstDayOfMonth（）；
打破
违约：
var date=date.today（）；
}
var信息；
$.ajax({
键入：“POST”，
url:“.matry:：base_to（'utilities/dhs/manager_dash'）。”，
async:false，
数据类型：“json”，
数据：{date:date.toString（'M/dd/yyyy'），模块：'ProductPieMod'}，
成功：功能（数据）
{
抽签（数据）；
}
});
});
});

My ajax返回以下字符串：

['FASTCLIX喷管装置'，62.5]，'FREESTYLE喷管装置'，25]，'ONETOUCH DELICA喷管装置'，12.5]

此外，该图表最初是使用完全相同的方法构建的，非常好。当我使用下拉菜单（运行onChange事件）时，它就会中断

更新

---

我也为此创建了一个提琴：

首先，您需要将

图表

变量放置到

文档中。准备好处理程序范围，接下来，您需要在绘制之前销毁图表

$(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');

});

$（文档）.ready（函数（）{
var图；
函数drawPie（数据）{
log（'called'）；
变量选项={
图表：{
renderTo:‘PieChart’，
plotBackgroundColor:null，
plotBorderWidth:null，
影子：错，
身高：350
},
标题：{
文字：“产品知名度”
},
工具提示：{
pointFormat:“{series.name}:{point.percentage}%”，
百分比小数：1
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：对
}
},
系列：[{
键入“pie”，
名称：“产品知名度”，
数据：数据
}]
};
if（chart！==未定义）chart.destroy（）；
图表=新的高点图表。图表（选项）；
$（'ProductPieMod div.mod_content'）.css（'height'，$（'PieChart'）.css（'height'）；
}
拉比([
[ONETOUCH DELICA喷管装置”，27.78]，
[“自由式喷管装置”，20.83]，
['Nova Max酮类测试试纸，健康与安全'，11.11]，
['ONETOUCH超软喷管装置2PK'，11.11]
]);
//从中获取数据https://gist.github.com/zba/4712055 ，延迟4
$.post（'/gh/gist/response.html/4712055'{
延误：4
}，函数（数据）{
抽签（数据）；
}“json”）；
});


还有一个演示，它不会破坏图表，但它会将颜色改变得太多
你的提琴没有帮助，它应该可以工作，提琴没有
$(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');

});