HighChartsのrenderer.text CSS属性を動的に変更します

Question

私のゲージチャート上のCSS属性カラー値を動的に変更したいと思います。テキストを表示する 機能はここにある：

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

私の私のコードは、のsetTextを機能するように呼びかけている前に入ってくる値が0（ゼロ）未満であるので、もし、それが私のテキスト、その後、JSONからの着信値をチェックしています1つの色で表示し、入力値が0（ゼロ）より大きい場合は、テキストを別の色で表示する必要があります。 チャートはJSON行くから動的にさわやかな値であると、一連のコマンドによって更新されます。この行の後

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

、私は関数を呼び出していたとき：

setText('myText', 0.3, colorParameter); 

各リフレッシュは、新しいテキストが上の追加発生それはコード内に新しい行を生成し、クリーンな視覚効果を生成しません。

どのようにしてこの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/