2

エージェントのチームの新しい販売数を示す縦棒グラフを自動的に更新するライブ販売ボードを構築しています。

次のことを行う updateChart() 関数があります。

  • sales オブジェクトを反復処理し、キーを配列に取り込みます (カテゴリに使用するため)。
  • newCategories.length が現在のカテゴリの長さより小さい場合、point.remove(); 余分なポイント数
  • それ以外の場合、newCategories の長さが長い場合、series.addPoint(0); 新しいデータ用のスペースを確保するための各シリーズへの新しいポイントの数
  • newCategory をアルファベット順に並べ替える
  • setCategories(newCategories)
  • 各シリーズのすべてのポイントをループし、新しい y 値で更新します

この例は、2 つのカテゴリ (2 人) とその販売数から始まります。最初の更新でエージェントの 1 つが削除され (販売が削除されました)、次の更新でエージェントが追加されます (販売が追加されます)。

2回目の更新後、2人目のカテゴリは名前ではなく数字の「2」になりました。chart.redraw() メソッドの直前 (または直後) に xAxis カテゴリを console.log に記録すると、正しいカテゴリが記録されます。

以下の 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}}

助けてください！

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 に答える