javascript - Highcharts 类别错误？

Question

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

我有一个函数 updateChart()，它执行以下操作:

• 遍历销售对象并将键拉入数组(用于类别)
• 如果newCategories.length小于当前类别长度，point.remove();额外的分数
• 否则，如果 newCategories 长度更长，则 series.addPoint(0)；每个系列的一些新点，为新数据腾出空间
• 按字母顺序对新类别排序
• 设置类别(新类别)
• 遍历每个系列中的所有点并使用新的 y 值更新

该示例以 2 个类别(2 人)及其销售数字开始。第一次更新删除了一个代理商(他们删除了他们的销售)，然后下一次更新将他们添加回来(他们添加了他们的销售)。

第二次更新后，第二个人的类别不是他们的名字，而是数字“2”。我什至在 chart.redraw() 方法之前(或之后)控制台记录了 xAxis 类别，它记录了正确的类别。

下面的 JS fiddle 恰好显示了这个问题。

(编辑，fiddle 之前有 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);
        }
    }