条形图类型的jqplot工具提示

时间:2018-06-08 19:28:04

标签: jquery bar-chart jqplot

我使用JqPlot绘制2个条形图。 我想在一个上显示X值,在第二个上显示Y值,但是在工具提示中。我试试这个,但没有结果,也尝试只有高亮一点和之前相同,任何想法为什么不呢?我搜索解决方案,并尝试相同的3,总是找不到结果。

$.jqplot("home-contenedor-grafico", [sNecesario, sCumplimiento], {
    title: 'Cumplimiento Turno vs Necesario',
    animate: true,
    animateReplot: true,
    cursor: {
        show: true,
        zoom: true,
        looseZoom: true,
        showTooltip: true,
        constrainOutsideZoom: false
    },
    legend: {
        show: true,
        placement: 'outside'
    },
    series: [
        {
            pointLabels: {
                show: true
            },
            label: 'Necesario',
            renderer: $.jqplot.BarRenderer,
            showHighlight: true,
            yaxis: 'y2axis',
            rendererOptions: {  
                animation: {
                    speed: 2500
                },
                barWidth: 2,
                barPadding: -15,
                barMargin: 0,
                highlightMouseOver: true
            }
        },
        {
            label: 'Cumplimiento',
            rendererOptions: {
                animation: {
                    speed: 2000
                }
            }
        }
    ],
    axesDefaults: {
        pad: 0
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticksNecesario,
            tickInterval: 10,
            drawMajorGridlines: false,
            drawMinorGridlines: true,
            drawMajorTickMarks: false,
            rendererOptions: {
                tickInset: 0.5,
                minorTicks: 1
            }
        },
        yaxis: {
            tickOptions: {
                formatString: "%'d"
            },
            rendererOptions: {
                forceTickAt0: true
            }
        },
        y2axis: {
            tickOptions: {
                formatString: "%'d"
            },
            rendererOptions: {
                alignTicks: true,
                forceTickAt0: true
            }
        }
    },
    highlighter: {
        show: true,
        //showLabel: true,
        //tooltipAxes: 'y',
        //sizeAdjust: 7.5, tooltipLocation: 'ne'
        tooltipContentEditor: tooltipContentEditor
    }
});
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];}

Image

0 个答案:

没有答案