하이 차트 범주 버그?

Question

대리인 팀의 새로운 판매 번호를 보여주는 기둥 형 차트를 자동으로 업데이트하는 게시판을 구축 중입니다. newCategories.length 미만이면 배열로 판매 객체를 통해

• 반복하고 키를 당긴
• (카테고리에 사용될)

  는 I, 다음을 수행 updateChart()가 기능을 갖고 현재 범주 길이보다 길면 point.remove(); 여분의 포인트 수

• newCategories 길이가 더 길면 else, series.addPoint (0); 각 계열의 새로운 포인트의 수는 새로운 데이터
• 알파벳순으로 정렬 newCategories
• setCategories (newCategories) 새로운 y 값과 각 시리즈와 업데이트의 모든 점을 통과
• 루프를위한 공간을 만들기 위해

이 예는 2 개의 카테고리 (2 명)와 판매 번호로 시작합니다. 첫 번째 업데이트는 에이전트 중 하나를 제거하고 (판매를 삭제 한) 다음 업데이트가 다시 추가됩니다 (판매가 다시 추가됨).

두 번째 업데이트 후 두 번째 사람의 범주는 이름이 아니며 숫자는 "2"입니다. 나는 console.redraw() 메소드의 직전 (또는 이후)에 xAxis 카테고리를 console.log하고 올바른 카테고리를 기록한다.

아래의 JS 피들은이 문제를 정확하게 보여줍니다.

//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(); 
} 

예 판매 대상 :

여기 updateChart() 함수 참조 용

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

(편집, 바이올린 전에, 문제는 지금 도시 JS 에러했다) :

{'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); 
     } 
    }