Extjs折線圖多行標籤

我想在X軸的折線圖上做一個標籤，顯示所選類別的摘要。我想格式化這個，所以在類別名稱下我有值。它的工作原理，如果我做的：Extjs折線圖多行標籤

return Ext.Date.format(v, 'M Y') + '\r' + 
(val.data.Budgeted==null?'':('$ '+Ext.util.Format.number(val.data.Budgeted, '0,000') + '\r')) + 
(val.data.Actual==null?'':('$ '+Ext.util.Format.number(val.data.Actual, '0,000') + '\r'));

的是，標籤是怎麼回事了，因爲我發現，每個\ r字符。所以如果我沒有\ r它顯示它應該，但是如果有N'\ r'-s那麼標籤本身將會下降，因爲它有N行文字。

也將是不錯的找到一個方法來格式化文本（調整）

編輯：
我發現了一個辦法做到這一點，在軸配置變化「drawVerticalLabels」功能。不過，在我看來，這是一個糟糕的方式。

來源

2013-02-07 Andrew Yukhymchak

我不得不做很類似的事情。在SO here上有截圖。

我最終這樣做了，就像一個HTML模板。我不像現在那樣熟悉ExtJS框架，所以如果我不得不重做它，我可能會使用一個xtemplate，但是這對我來說是成功的：

series: [{ 
    type: 'line', 
    title: 'This Year', 
    axis: 'left', 
    smooth: false, 
    xField: 'date_value', 
    yField: 'the_count', 

    // custom tips 
    tips: { 
     trackMouse: true, 
     width: 127, 
     height: 70, 
     hideDelay: 0, 
     dismissDelay: 0, 
     renderer: function(record) { 
     this.setTitle('<table width=115><tr><th><b>' + 
      record.get('date_value') + 
      ':</b></th><td align=right>' + 
      record.get('the_count') + 
      '</td></tr><tr><th><b>Quota:</b></th><td align=right>' + 
      record.get('the_quota') + 
      '</td></tr><tr><th><b>Diff:</b></th><td align=right>' + 
      (record.get('the_quota') > record.get('the_count') ? 
       '-' + (record.get('the_quota') - record.get('the_count')) : 
       '+' + (record.get('the_count') - record.get('the_quota')) 
      ) + '</td></tr></table>' 
     ); 
     } 
    } 
}]

來源

2013-02-07 19:23:15 Geronimo

我不希望它成爲提示，我已經。我想X軸的標籤是多線的 –

Extjs折線圖多行標籤

回答

相關問題