Question

我想在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 \ n字符。所以，如果我没有\ r \ n它显示它应该如此，但如果有N'\ r'-s那么标签本身将会下降，因为它上面有N行文字。

也很高兴找到格式化文本的方法（对齐）

编辑：
通过在轴配置中更改“drawVerticalLabels”功能，我找到了一种方法。不过，在我看来，这是一个糟糕的方式。

Answer 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>'
        );
      }
    }
}]

Answer 2

通过在轴渲染器中插入换行符'\ n'可以完成多行，并且默认情况下它居中。

Extjs折线图多线标签

2 个答案: