javascript – jqplot工具提示内容编辑器
作者:互联网
我在显示jq绘图条形图的工具提示时面临问题
我的jqPlot代码是
<script class="code" type="text/javascript">
$(document).ready(function(){
var s1 = [0,10,20,30,40,50,60,70,80,90,100];
var s2 = [-100,-90,-80,-70,-60,-50,-40,-30,-20,-10,-0];
var ticks = ['01-jun','02-jun','03s-jun','04-jun','05-jun','06-jun','07-jun','08-jun','09-jun','10-jun'];
var plot1 = $.jqplot('chart1', [s1, s2], {
animate: !$.jqplot.use_excanvas,
stackSeries: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true, barPadding: 10,barMargin: 15},
pointLabels: { show: true }
},
series: [
{ color: '#68BA38',label:'Uptime' },
{ color: 'red',label:'Downtime' },
{ label:'abcd' }
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: 1,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
pad: 1,
min:-100,
max: 100,
}
},
highlighter:{
show:true,
tooltipContentEditor:tooltipContentEditor
},
});
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
</script>
它的显示工具提示如下:正常运行时间,20或停机时间,-20
我想显示工具提示包含我的刻度值,如:01-jun
解决方法:
我自己就是这个问题,所以我使用Firefox的Web Developer工具检查tooltipContentEditor函数中的绘图对象,以找到x轴标签的位置.它位于plot.options.axes.xaxis.ticks中.因此,您希望获取数据点的x轴标签的代码是:
plot.options.axes.xaxis.ticks[pointIndex]
这是所讨论的点索引的x轴标签.
我现在使用的回调函数的完整代码是:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
return plot.series[seriesIndex]["label"] + ": " + plot.options.axes.xaxis.ticks[pointIndex] + ", " + plot.data[seriesIndex][pointIndex];
}
这显示了系列标签,x轴刻度标签,然后是数据点值.
标签:jqplot,javascript,charts 来源: https://codeday.me/bug/20190728/1566629.html