HighCharts에서 renderer.text CSS 속성을 동적으로 변경하십시오.

Question

게이지 차트에서 CSS 속성 색상 값을 동적으로 변경하고 싶습니다. 텍스트를 표시하는 기능은 여기에 있습니다 :

내 내 코드 입력 값이 0보다 (영), 다음 내 텍스트 인 경우 그래서, JSON에서 들어오는 값을 확인 년대의 setText를 작동하려면 호출하기 전에

function setText(text, x, check) { 
    var chart = $('#graph-4').highcharts(); 

    if (check === true) { 
     var color = '#ffffff'; 
    } else { 
     var color = '#555555'; 
    } 

    var ret = chart.renderer.text(text, chart.plotWidth*x, chart.plotHeight*0.5) 
    .attr({ 
     zIndex: 5 
    }) 
    .css({ 
     fontSize: '13px', 
     color: color, 
     'text-anchor': 'middle', 
    }) 
    .add(); 
} 

하나의 색상으로 표시되어야하며 입력 값이 0보다 큰 경우 텍스트는 다른 색상으로 표시되어야합니다. 차트는 JSON과 시리즈에서가는 동적으로 상쾌한 값은 명령에 의해 업데이트됩니다된다

setText('myText', 0.3, colorParameter); 

각 새로운 텍스트가 추가 생성 새로 고침 :이 줄 뒤에

chart.series[0].setData(incoming_value); 

나는 함수를 호출하고있을 때 마지막 텍스트 맨 위에 표시되므로 코드에 새로운 줄이 생기고 깨끗한 시각 효과가 생성되지 않습니다.

어떻게이 CSS 속성을 동적으로 업데이트 할 수 있습니까?

Answer 1

첫 번째 호출에서 함수를 수정하면 레이블이 만들어지고 레이블이 이미 만들어지면 일부 매개 변수 만 변경됩니다.

function setText(text, x, check) { 
    var chart = $('#graph-4').highcharts(); 
    var ret = this.customText; 
    console.log(chart); 
    if (check === true) { 
    var color = '#ffffff'; 
    } else { 
    var color = '#555555'; 
    } 

    if (!ret) { 
    ret = this.customText = chart.renderer.text(null, -9999, -9999) 
    .attr({ 
     zIndex: 5 
    }) 
    .css({ 
     fontSize: '13px', 
     'text-anchor': 'middle' 
    }) 
    .add(); 
    } 

    ret.attr({ 
    text: text, 
    x: chart.plotWidth * x, 
    y: chart.plotHeight * 0.5 
    }).css({ 
    color: color 
    }); 
} 

예 : 나는 단지 하나의 레이블을 표시하려면 http://jsfiddle.net/qdnk21ej/