[英]How can I customize my chart tooltip in jqplot?
I have following chart. 我有以下图表。 I need to show MM/DD
as my x-axis label. 我需要将MM/DD
显示为我的x轴标签。 In tooltip
I want to show HH:y-axis
data. 在tooltip
我想显示HH:y-axis
数据。
IE: In the following chart I want 'Oct 15','Oct 16','Oct 17'
as x-axis label and as tooltip I need to show '4.00,4' '6.00,7'
etc. Now my tooltip showing x-axis label itself. IE:在下面的图表中我想要'4.00,4' '6.00,7'
'Oct 15','Oct 16','Oct 17'
'4.00,4' '6.00,7'
'Oct 15','Oct 16','Oct 17'
作为x轴标签和工具提示我需要显示'4.00,4' '6.00,7'
等等现在我的工具提示显示x轴标签本身。
var line1 = [
['2013-10-15 4:00', 4],
['2013-10-16 6:00', 7],
['2013-10-17 9:00', 6]
];
var plot1 = $.jqplot('firstChart', [line1], {
title: 'Server Activity',
seriesDefaults: {
rendererOptions: {
varyBarColor: true,
barWidth: 10
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -40
}
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
tickOptions: {
mark: 'outside',
show: true,
showLabel: true,
formatString: '%b %d, %Y %H:00',
fontSize: 11
}
},
tickInterval: '1 day'
},
yaxis: {
min: 0,
tickOptions: {
mark: 'inside',
show: true,
showLabel: true,
formatString: '%d',
fontSize: 11
}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
Try the following for the tooltip 请尝试以下工具提示
highlighter: {
tooltipContentEditor: function(current, serie, index, plot){
var val = plot.data[serie][index];
var valArr = val[0].split(" ");
return valArr[1] + ', ' + val[1];
}
}
You can use the tooltipContentEditor option of the highlighter 您可以使用荧光笔的tooltipContentEditor选项
tooltipContentEditor: function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
var stringToReturn = '<table class="tooltip-info"> + '<tr><td>'+ '</td></tr>'+ </table>';
return stringToReturn;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.