jqplot工具提示内容编辑器
jqplot tooltip Content Editor
我在显示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
函数中的plot
对象,以找到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轴刻度标签,然后显示数据点值。
我认为它可能类似
return ticks[pointIndex];
相关文章:
- JQuery文本编辑器-在工具栏中添加其他下拉列表
- 内容编辑器 Web 部件脚本不在 IE 11 中运行(如果开发人员工具处于打开状态,则运行)
- 如何使用具有不同工具栏的多个Aloha编辑器
- 没有Chrome开发工具,王牌编辑器就不会显示
- 用于显示字段的工具提示和显示 Jquery 验证中的错误的工具提示器
- 筛选器操作后,工具提示停止工作
- 如何在 extjs 4.2.1 中为鼠标悬停时的行扩展器图标提供工具提示
- 工具提示器悬停选择和选项在IE中不起作用
- 如何自定义剑道编辑器工具排列
- d3.js:如何使用鼠标洗涤器工具提示单击更新图表
- 任何 html 元素的 Javascript 样式编辑器工具栏
- 仅当具有 1 个工具栏的多个编辑器的编辑器处于焦点中时,才显示 TextAngular 工具栏
- 单击CK编辑器工具栏上的获取UI按钮
- 隐藏和显示剑道ui编辑器工具栏
- 使用meta.tdAttr的网格列渲染器工具提示
- jqplot工具提示内容编辑器
- 在SAPUI5 (Javascript)项目中集成Quill富文本编辑器工具栏
- 删除绑定和CK编辑器工具栏不显示
- 编辑此工具提示实现,使工具提示等待x秒隐藏
- 如何在默认情况下显示剑道内联编辑器工具栏