2

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

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

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

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

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

下面的 JS 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}}

请帮忙！

4

1 回答 1

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);
        }
    }
于 2013-11-04T10:35:52.213 回答