动态设置Highcharts图表的系列和类别数据

Question

我尝试使用以下代码通过 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);
        }
    });
}

当页面加载或点击筛选按钮时，BuildReport将调用处理程序并将系列数据传递给SetChartSeries。从这里我可以看到设置了图表属性，但是图表没有被绘制。我是否做错了一些显而易见的事情？

- Stewart Alan

---

你尝试将AJAX方法更改为POST了吗？ - emerson.marini

好像那不是问题所在。数据从 AJAX 调用中返回得很好。之前我是在 AJAX 调用的成功处理程序中使用系列和类别属性创建图表，这很有效，但我更愿意只创建一次图表，然后使用每个新的 AJAX 调用更新类别和系列数据。 - Stewart Alan

在我更了解Highcharts的工作原理之前，我遇到了一些头疼的问题。也许重绘图表？chart.redraw() - emerson.marini

在创建图表时，请使用 chart.addSeries(object)，并在设置数据时使用 chart.series[index].setData(array)。chart.series = .. 不起作用。 - Paweł Fus

Answer 1

如果您想创建新的系列，需要使用Chart.addSeries()方法。

如果您想在现有系列中设置新数据，需要使用Series.setData()方法。

根据我的观察，您为每个请求创建新系列并使用addSeries方法。

- Cihad Turhan

Answer 2

以下是我动态更新系列的操作。默认行为将重新绘制图表。请查看https://api.highcharts.com/class-reference/Highcharts.Chart#update。

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

- Edison Chang

Answer 3

如果你想动态设置类别数据，你需要使用Axis.update()方法。

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

- Swetha