Highcharts类别Bug？

Question

我正在建立一个实时销售板，它会自动更新柱形图，显示一组代理商的新销售数字。

我有一个函数updateChart（），它执行以下操作：

• 遍历销售对象并将密钥拉入数组（用于类别）
• 如果newCategories.length小于当前类别的长度，则指向.remove（）;额外的点数
• 否则，如果newCategories长度更长，则series.addPoint（0）;每个系列的一些新点为新数据腾出空间
• 按字母顺序排序newCategories
• setCategories（newCategories）
• 循环遍历每个系列中的所有点并使用新的y值更新

该示例以2个类别（2个人）及其销售数字开头。第一次更新删除了其中一个代理（他们删除了他们的销售），然后下一个更新将它们添加回来（他们将销售额添加回来）。

第二次更新后，第二个人的类别不是他们的名字，而是数字“2”。我甚至在chart.redraw（）方法之前（或之后）控制.log记录xAxis类别，并记录正确的类别。

下面的JS小提琴正好显示了这个问题。

（编辑，小提琴之前有JS错误，现在显示问题）

http://jsfiddle.net/t3y6h/1/

作为参考，这里是updateChart（）函数：

//this function updates the chart in the current view. it does not redraw the entire chart,
//it updates points and adds/removes x-axis items when needed
function updateChart()
{
    var chart = $("#teamboard").highcharts();
    var sales = getSalesObject();

    //place all categories (keys) of sales object into an array
    var newCategories = [];
    for(var s in sales)
    {
        newCategories.push(s);
    }

    //remove extra data points from end of series if there are less categories now
    //this loop will not run if newCategories is the same length or greater
    for(var i = newCategories.length; i < chart.xAxis[0].categories.length; i++)
    {
        for(var j = 0; j < chart.series.length; j++)
        {
            chart.series[j].data[i].remove(false);
        }
    }

    //if there are more new categories, we need to add that new data points to the end of the series
    for(var i = chart.xAxis[0].categories.length; i < newCategories.length; i++)
    {
        for(var j = 0; j < chart.series.length; j++)
        {
            //temporarily add 0, we will go and update every point later
            chart.series[j].addPoint(0, false);
        }
    }

    //alphabetically sort the x-Axis
    newCategories.sort();

    //assign the new sorted categories to the x-Axis
    chart.xAxis[0].setCategories(newCategories);

    //loop through all categories and update cable, internet, phone
    for(var i = 0; i < newCategories.length; i++)
    {
        chart.series[0].data[i].update(sales[newCategories[i]].cable, false);
        chart.series[1].data[i].update(sales[newCategories[i]].internet, false);
        chart.series[2].data[i].update(sales[newCategories[i]].phone, false);
    }

    chart.redraw();
}

示例销售对象：

{'Bart':{cable:4, internet:5, phone:5}, 'Andy':{cable:1, internet:1, phone:1}}

请帮忙！

Answer 1

这可能是由正在进行的动画引起的，并试图更新积分，因此缺少某些东西。

实现这一目标的正确方法是使用setData。修复示例：http://jsfiddle.net/t3y6h/5/

function updateChart() {
    var chart = $("#container").highcharts();
    var sales = getSalesObject(salesObjectNumber++),
        sorter = [],        // temporary container for sorting data
        d = [[],[],[]];     // temporary data point container


    //place all categories (keys) of sales object into an array
    var newCategories = [];
    for (var s in sales) {
        sorter.push([s, sales[s]]);
    }

    sorter.sort(function(a, b) {
       return a[0] > b[0];  
    });

    //place all categories (keys) of sales object into an array
    var newCategories = [];
    for (var s in sorter) {
        newCategories.push(sorter[s][0]);
        d[0].push(sorter[s][1].cable);
        d[1].push(sorter[s][1].internet);
        d[2].push(sorter[s][1].phone);
    }
    //assign the new sorted categories to the x-Axis
    chart.xAxis[0].setCategories(newCategories, false);

    //loop through all categories and update cable, internet, phone
    for (var i = 0; i < newCategories.length; i++) {
        chart.series[0].setData(d[0], false);
        chart.series[1].setData(d[1], false);
        chart.series[2].setData(d[2], false);
    }
    //log categories, apparently they were set correctly?
    $("#log").append(chart.xAxis[0].categories + '<br />');

    chart.redraw();
}

修改

另一种解决方案是添加具有指定x值的点，例如：http://jsfiddle.net/t3y6h/6/

代码：

    //if there are more new categories, we need to add that new data points to the end of the series
    for(var i = chart.xAxis[0].categories.length; i < newCategories.length; i++)
    {
        for(var j = 0; j < chart.series.length; j++)
        {
            //temporarily add 0, we will go and update every point later
            chart.series[j].addPoint([i, 0], false);
        }
    }