Jquery 动态设置Highcharts系列和类别数据

我正在尝试使用以下代码通过AJAX调用更新图表

$j(document).ready(function () {
    $j("#filter").click(function () {
        BuildReport();
    });

    $j("#container").highcharts({
        chart: {
            type: 'column',
            marginRight: 130,
            marginBottom: 100
        },
        title: {
            text: 'SEs open by Group',
            x: -20 //center
        },
        yAxis: {
            title: {
                text: ''
            },
            min: 0,
            allowDecimals: false
        },
        xAxis: {},
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                cursor: 'pointer',
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: {}
    });

    BuildReport();
});

function SetChartSeries(series) {
    debugger;
    chart = $j("#container").highcharts();
    chart.xAxis[0].setCategories(getReportCategories(series));
    chart.series = $j.map(series, function (item) {
        return {
            name: item.Name,
            color: item.Colour,
            data: $j.map(item.Items, function (list) {
                return {
                    name: list.Category,
                    y: list.Value,
                    id: list.ID
                };
            })
        };
    });
}

function getReportCategories(data) {
    var catArray = [];
    $j.each(data, function (index, value) {
        $j.each(value.Items, function (index, value) {
            if ($j.inArray(value.Category, catArray)) {
                catArray.push(value.Category);
            }
        });
    });

    return catArray;
}

function BuildReport() {
    $j.ajax({
        url: "ChartDataHandler.ashx",
        dataType: "json",
        cache: false,
        success: function (data) {
            SetChartSeries(data.Series);
        }
    });
}

$j（文档）.ready（函数（）{
$j（“#过滤器”）。单击（函数（）{
BuildReport（）；
});
$j（“#容器”）。海图({
图表：{
键入：“列”，
marginRight:130，
marginBottom:100
},
标题：{
文本：“SEs按组打开”，
x:-20/中心
},
亚克斯：{
标题：{
文本：“”
},
分:0,，
allowDecimals:false
},
xAxis:{}，
工具提示：{
格式化程序：函数（）{
返回“+this.x+”
+
this.series.name+'：'+this.y+'
+
“总计：”+this.point.stackTotal；
}
},
打印选项：{
专栏：{
堆叠：“正常”，
光标：“指针”，
}
}
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-10，
y:100，
边框宽度：0
},
系列：{}
});
BuildReport（）；
});
函数设置图表系列（系列）{
调试器；
chart=$j（“#容器”）.highcharts（）；
chart.xAxis[0].setCategories（getReportCategories（series））；
chart.series=$j.map（系列，函数（项）{
返回{
名称：item.name，
颜色：项目。颜色，
数据：$j.map（item.Items，函数（列表）{
返回{
名称：列表。类别，
y:列表。值，
id:list.id
};
})
};
});
}
函数getReportCategories（数据）{
var-catArray=[]；
$j.每个（数据、函数（索引、值）{
$j.each（值、项、函数（索引、值）{
如果（$j.inArray（value.catArray、catArray））{
catArray.push（value.Category）；
}
});
});
返回混乱；
}
函数BuildReport（）{
$j.ajax({
url:“ChartDataHandler.ashx”，
数据类型：“json”，
cache:false，
成功：功能（数据）{
SetChartSeries（数据系列）；
}
});
}

---

当页面加载或单击过滤器按钮时，BuildReport调用处理程序并将序列数据传递给SetChartSeries。从这里我可以看到图表属性已设置，但图表从未绘制。我做错了什么吗？

如果你想创建新的系列，你需要使用这个方法

如果要在现有系列中设置新数据，则需要使用 方法

---

如我所见，您可以为每个请求创建新的序列，并使用

addSeries

方法

如果要动态设置类别数据，则需要使用Axis.update（）方法

---

下面是我动态更新系列的步骤。默认行为将重新绘制图表。检查

---

您是否尝试将AJAX方法更改为POST？这似乎不是问题所在。数据从AJAX调用中恢复良好。之前，我在ajax调用的成功处理程序中使用series和category属性创建图表，效果很好，但我更愿意只创建一次图表，然后使用每个新的ajax调用更新类别和系列数据。我遇到了一些麻烦，直到我进一步了解Highcharts的工作原理。也许重新绘制图表？chart.redraw（）在创建图表时使用

chart.addSeries（object）

，在设置数据时使用

chart.series[index].setData（array）

<代码>图表.系列=什么都不做。

chart.xAxis[0].update({categories:arrayname,tickInterval:20},true);

$('#YourContainer').highcharts().update( {
    series:[{
      name: 'New Legend',
      data: [{
          name: 'New Category',
          y: data
      }]
    ]}
})