如何在Extjs5中更改条形图的标签
How to change the label of bar chart in Extjs5?
这是关于ExtJs5图表的内容。更改条形图的标签时遇到问题。
代码如下:
Ext.create('Ext.chart.CartesianChart', {
store: {
fields: ['pet', 'households', 'total'],
data: [{
pet: {name:'Cats'},
households: 38,
total: 93
}]
},
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'pet',
yField: 'households',
label:{
field:'pet',
renderer:function(pet){
return 'Dear '+pet.name;
}
}
}]
});
您一定注意到字段"pet"是一个对象,而不是字符串。系列标签中的渲染器返回我想要的值,但标签仍然是[object object]!
类别(代码中的x轴)下的标签由"类别"而非系列呈现。尝试以下代码:
{
type: 'category',
position: 'bottom',
renderer:function(label){
return label.name;//the var 'label' represents the pet object.
}
}
顺便说一下,我发现了另一个问题。无论图表存储中有多少个模型,都只显示第一个条形图!
相关文章:
- Chart.js条形图:网格颜色和隐藏标签
- 如何在Extjs5中更改条形图的标签
- Chart.js条形图标签在悬停时被隐藏
- ZingCharts水平堆叠条形图X轴标签被切断
- 堆积条形图标签-D3
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- gRaphaël-带标签和日期的条形图示例
- 更新条形图并删除标签
- D3 垂直条形图为标签文本添加换行符
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 剑道条形图类别标签基于值的左右
- D3JS 条形图:如何允许重复的 x 轴标签值
- 在堆叠条形图上显示标签
- 将事件添加到条形图的 X 轴标签
- 有没有办法防止 xaxis 标签在 flot.js 条形图中重叠
- 高图表 - 无法在条形图上看到所有标签
- D3堆积条形图添加数据标签并解决D3标签放置问题
- MPLD3:条形图的标签信息
- 浮动:堆叠条形图标签重叠/不显示
- 高图表条形图 - 标签未显示在条形图中