如何将系列数据呈现为煎茶图表中的标题
How to render series data to a title in sencha charts
我有一个从我的商店检索数据的图表,这四条信息如下
型号代码
Ext.define('QvidiApp.model.ClipsViews', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'meta_id'
},
{
name: 'title'
},
{
name: 'viewed'
},
{
name: 'glances'
}
]
}
});
现在,我将查看字段和浏览字段作为图表中的数值字段,并将标题字段作为图表中的类别标题。
我想在将鼠标悬停在字段上时呈现字段的标题名称,原因 id 这个。标题太长,无法容纳图表的 x 轴,因此我用"meta_id"代替标题。因此,当我将鼠标悬停在 x 轴meta_id字段上时,我希望显示标题名称
所以例如
meta_id 100 将等于标题值 ###
这是我到目前为止的图表代码
{
xtype: 'chart',
centered: true,
height: '150%',
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'meta_id'
],
grid: true,
label: {
rotate: {
degrees: 0
},
font: '7px'
},
title: 'Clips'
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: true,
position: 'left',
title: 'Amount'
}
],
series: [
{
type: 'bar',
renderer: function(sprite, config, rendererData, index) {
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
],
legend: {
xtype: 'legend'
}
}
正如您在上面的代码中看到的,我有一个渲染函数,但我不知道该放入什么
系列的使用技巧
series: [
{
type: 'bar',
tips: {
trackMouse: true,
width: 74,
height: 38,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('meta_id') + '<br />' + storeItem.get('title'));
}
},
style: {
minGapWidth: 1,
minBarWidth: 60,
maxBarWidth: 70,
opacity: 0.80
},
xField: 'meta_id',
yField: [
'viewed',
'glances'
]
}
]
相关文章:
- CSS-如何定位内容数据标题
- 在PHP中使用javascript更改页面标题'if'
- Brightcove获取/显示HTML中的当前视频标题和描述
- React组件-设置页面标题
- 动态更改高图中的系列颜色
- jQuery动态更改标题
- HighCharts长标题文本在某些元素上重叠
- 将行添加到具有固定标题的HTML表中
- CKEditor v4:自制插件中对话框的动态标题
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- chart.series[id].remove()无法刷新高位图表/高位股票中其他系列的图例属性
- 如何在自动完成时设置属性标题
- Highcharts-如何正确更新VUMeter的系列[0]数据和yAxis标题
- 如何将系列数据呈现为煎茶图表中的标题
- 动态修改系列的标题
- 在Highcharts JavaScript饼图中创建系列/组标题
- Highcharts: yAxis标题=当前系列名称
- highcharts:当添加新的数据系列时,如果标题与现有的Y轴不同,则添加新的Y轴
- HighStock导出渲染不正确的标题和导航器系列
- HighCharts:可以总结系列数据并在标题中显示