javascript – jqplot工具提示内容编辑器

2019-07-28 23:33:36 阅读：155 来源： 互联网

我在显示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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – jqplot工具提示内容编辑器