在Ext JS 5中，如何让图表始终显示工具提示？我想要一个工具提示，在图表的x轴上显示每个月的每一行。侦听器事件将鼠标移动到新的月份点，但会一直向上延伸到突出显示的月份的y轴。当您将鼠标从x轴点移动到x轴点并显示在y轴线上时，它将跟随鼠标并进行更新。
现在我可以做的就是在实际线条本身悬停时显示工具提示。
我尝试使用iteminfo作为交互，但没有做任何事情。找不到这个在线触摸的工作示例： https://fiddle.sencha.com/#fiddle/deh
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: ['->', {
text: 'Preview',
handler: function(button) {
button.up('panel').down('cartesian').preview();
}
}, {
text: 'Download',
handler: function(button) {
button.up('panel').down('cartesian').download();
}
}]
}],
items: [{
xtype: 'cartesian',
highlight: true,
width: '100%',
height: 500,
legend: {
docked: 'right'
},
store: getStore(),
insetPadding: 40,
interactions: [{
type: 'itemhighlight'
}, {
type: 'crosszoom'
}],
sprites: [{
type: 'text',
text: 'Line Charts - Marked Lines',
font: '22px Helvetica',
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position
}],
axes: [{
type: 'numeric',
fields: ['data1', 'data2', 'data3', 'data4'],
position: 'left',
grid: true,
minimum: 0,
renderer: function(v) {
return v.toFixed(v < 10 ? 1 : 0) + '%';
}
}, {
type: 'category',
fields: 'month',
position: 'bottom',
grid: true,
label: {
rotate: {
degrees: -45
}
}
}],
series: [{
type: 'line',
axis: 'left',
title: 'IE',
xField: 'month',
yField: 'data1',
style: {
lineWidth: 4
},
marker: {
radius: 5
},
highlight: {
fillStyle: '#000',
radius: 5,
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
var title = item.series.getTitle();
this.setHtml(title + ' for ' + storeItem.get('month')
+ ': ' + storeItem.get(item.series.getYField()) + '%');
}
}
}, {
type: 'line',
axis: 'left',
title: 'Firefox',
xField: 'month',
yField: 'data2',
style: {
lineWidth: 4
},
marker: {
radius: 4
},
highlight: {
fillStyle: '#000',
radius: 5,
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
var title = item.series.getTitle();
this.setHtml(title + ' for ' + storeItem.get('month')
+ ': ' + storeItem.get(item.series.getYField()) + '%');
}
}
}, {
type: 'line',
axis: 'left',
title: 'Chrome',
xField: 'month',
yField: 'data3',
style: {
lineWidth: 4
},
marker: {
radius: 4
},
highlight: {
fillStyle: '#000',
radius: 5,
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
var title = item.series.getTitle();
this.setHtml(title + ' for ' + storeItem.get('month')
+ ': ' + storeItem.get(item.series.getYField()) + '%');
}
}
}, {
type: 'line',
axis: 'left',
title: 'Safari',
xField: 'month',
yField: 'data4',
style: {
lineWidth: 4
},
marker: {
radius: 4
},
highlight: {
fillStyle: '#000',
radius: 5,
lineWidth: 2,
strokeStyle: '#fff'
},
tooltip: {
trackMouse: true,
style: 'background: #fff',
renderer: function(storeItem, item) {
var title = item.series.getTitle();
this.setHtml(title + ' for ' + storeItem.get('month')
+ ': ' + storeItem.get(item.series.getYField()) + '%');
}
}
}]
}]
});
function getStore() {
return {
fields: ['month', 'data1', 'data2', 'data3', 'data4'],
data: [{
month: 'Jan',
data1: 20,
data2: 37,
data3: 35,
data4: 4
}, {
month: 'Feb',
data1: 20,
data2: 37,
data3: 36,
data4: 5
}, {
month: 'Mar',
data1: 19,
data2: 36,
data3: 37,
data4: 4
}, {
month: 'Apr',
data1: 18,
data2: 36,
data3: 38,
data4: 5
}, {
month: 'May',
data1: 18,
data2: 35,
data3: 39,
data4: 4
}, {
month: 'Jun',
data1: 17,
data2: 34,
data3: 42,
data4: 4
}, {
month: 'Jul',
data1: 16,
data2: 34,
data3: 43,
data4: 4
}, {
month: 'Aug',
data1: 16,
data2: 33,
data3: 44,
data4: 4
}, {
month: 'Sep',
data1: 16,
data2: 32,
data3: 44,
data4: 4
}, {
month: 'Oct',
data1: 16,
data2: 32,
data3: 45,
data4: 4
}, {
month: 'Nov',
data1: 15,
data2: 31,
data3: 46,
data4: 4
}, {
month: 'Dec',
data1: 15,
data2: 31,
data3: 47,
data4: 4
}]
};
};