動態更改HighCharts中的renderer.text css屬性

我想動態更改我的量表圖表上的css屬性顏色值。顯示文本的功能是在這裏：動態更改HighCharts中的renderer.text 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，它檢查從JSON傳入的值，所以如果傳入值小於0（零），然後我的文字應該以一種顏色顯示，並且當輸入值大於0（零）時，文本應該以另一種顏色顯示。圖表從JSON和一系列準備動態清爽值由命令更新：

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

這條線後，當我打電話的功能：

setText('myText', 0.3, colorParameter);

每次刷新生成新的文本添加上所以它在代碼中生成新行，而不是乾淨的視覺效果。

我如何動態更新這個css屬性？

來源

2017-03-09 Pirum

修改你的函數，在第一次調用它時創建一個標籤，然後當標籤已經創建時，只改變一些參數。

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/

來源

2017-03-09 15:35:39 morganfree

如果我想只顯示一個標籤，這是非常有用的。但是，如果我想使用'setText'函數顯示兩個（或更多）標籤，它僅適用於代碼中的最後一次出現。那麼我們可以在你的代碼中改變它，使它更具普遍性/可重複性？臨時我創建了第二個函數'setText2'，並將'this.customText'改爲'this.customText1'。 – Pirum

我會創建一個數組/對象，它保留所有的自定義文本，並添加另一個參數來標識要更改的文本 - http://jsfiddle.net/qdnk21ej/1/ – morganfree

動態更改HighCharts中的renderer.text css屬性

回答

相關問題