3

折れ線グラフの X 軸に、選択したカテゴリの概要を示すラベルを作成したいと考えています。これをフォーマットしたいので、カテゴリ名の下に値があります。私がすればそれは動作します：

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」機能を変更することで、これを行う方法を見つけました。それでも、それは私の意見では悪い方法です。

4

2 に答える 2

1

私はかなり似たようなことをしなければならなかったと思います。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-07T19:23:15.067 に答える