1

我正在寻找一种方法来根据下拉列表上的更改事件动态更新 highcharts 饼图中的数据。我看过几个例子，但我真的无法弄清楚为什么我不能让它工作。这是我的全部代码，我将我的东西包装在一个函数中，这样我就可以使用下拉列表的 Change() 事件调用该函数，但是我收到 CRIPT438 的错误：对象不支持属性或方法“setData”

function showClass(){
    var total = 0;
var options = {
        chart:{type:'pie',
        renderTo: 'ctl00_ContentPlaceHolder1_Overview1_tcAssetAllocation_body',
              events: {
                load: function(event) {
                $('.highcharts-legend-item').last().append('<br/><div style="width:220px"><hr/> <span style="float:left"> Total </span><span style="float:right">100%</span> </div>')                    
                }
              }
        },
        credits:{enabled: false},
        colors:[
            '#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319',     '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
            ],
        title:{text: null},
        tooltip:{
            enabled: true,
            animation: true
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                animation: true,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                    enabled: false,                        
                    formatter: function() {
                        return this.percentage.toFixed(2) + '%';
                    }
                }                                   
            }
        },
        legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            width: 220,
            verticalAlign: 'top',
            borderWidth: 0,
            useHTML: true,
            labelFormatter: function() {
            total += this.y;
                return '<div style="width:200px"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y + '%</span></div>';
            },
            title: {
                text: 'Primary',
                style: {
                    fontWeight: 'bold'
                }
            }
        },
        series: [{
            type: 'pie',
            data: [['Domestic Equity', 38.5],['International Equity', 26.85],['Other', 15.70],['Cash and Equivalents', 10.48],['Fixed Income', 8.48]]
        }]
}
var chart = new Highcharts.Chart(options);
$("#ctl00_ContentPlaceHolder1_Overview1_AccountList1_ddlAccounts").change(function(){
    var selVal = $("#ctl00_ContentPlaceHolder1_Overview1_AccountList1_ddlAccounts").val();
    if(selVal == '1124042'){
        chart.series[0].setData([['Domestic Equity', 18.5], ['International Equity', 46.85], ['Other', 5.70], ['Cash and Equivalents', 20.48], ['Fixed Income', 8.48]]);                }
});

}

是因为我嵌套在另一个函数中吗？只是所有的小提琴都使用了 document.ready 函数，并且它正确加载了调用 document.ready() 中的函数，但是在 change 事件中获取它让我很困惑。任何帮助是极大的赞赏。非常感谢你，NickG

4

1 回答 1

2

将对象options用作 Highcharts API 的一部分是错误的。找到该行：options.series[0].setData并更改为chart.series[0].setData(). 然后删除创建新图表（您不需要 - 图表已创建）。

于 2013-04-29T11:36:02.073 回答