Extjs折线图多线标签
Posted
技术标签:
【中文标题】Extjs折线图多线标签【英文标题】:Extjs Line Chart multiline label 【发布时间】:2013-02-07 18:41:03 【问题描述】:我想在 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”函数。不过,在我看来,这是一种糟糕的方式。
【问题讨论】:
【参考方案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>'
);
]
【讨论】:
我不希望它是小费,我已经有了。我希望 X 轴的标签是多行的【参考方案2】:多行可以通过在轴渲染器中插入'\n'换行来完成,默认情况下它是居中的。
【讨论】:
以上是关于Extjs折线图多线标签的主要内容,如果未能解决你的问题,请参考以下文章
Python交互图表可视化Bokeh:4. 折线图| 面积图