Add legend name to JQPlot tooltip and format date correctly in tool tip

问题

I want to add the plot's legend name to the mouse over tool tip for a series line. I've used one of the solutions to this jqplot tooltip on bar chart.

Specifically I used the following function:

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
   // display series_label, x-axis_tick, y-axis value
   return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}

However, the problem I have is that it does not use the legend name 'My legend name' instead it will use the JQPlot default of 'Series 1' or 'Series 5' (number depending on series position).

The second problem is that I lose my date formatting once I start using the above function. So I get a number e.g. something like 123672378328 instead of it being converted to the format I specified in tickOptions.

My code to generate the chart is below:

var plot;
function buildChart(chartDivId, graphData, chartTitle, graphSeriesNames, labelNames) {

    var id = "#" + chartDivId;
    $(id).empty(); 

    var seriesLine = { lineWidth:1, markerOptions: { show:false } };

    plot = $.jqplot(chartDivId, graphData,
        {
            title: chartTitle,
            axes:
            {
                xaxis:
                {
                    label:'Date',
                    renderer:$.jqplot.DateAxisRenderer,
                    tickOptions: { formatString:'%b&nbsp; %#d&nbsp; %H:%M' }
                },
                yaxis: { label: 'Parameter Values', tickOptions: { formatString:'%.2f' }, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, labelOptions : { angle: 270, fontFamily: 'Arial, Verdana, Helvetica', fontSize: '8pt' }, autoscale: true },
            },
            seriesDefaults: {
                 markerOptions: {
                     show: true, style:'filledCircle', size: 4.5      
                 }
            },
            highlighter:
            {
                show: true,
                sizeAdjust: 7.5,
                tooltipContentEditor:tooltipContentEditor  //new code added to attempt to add legend name to mouse over tool tip
            },
            cursor:
            {
                show: true,
                zoom: true,
                showTooltip: false
            },
            legend:
            {
                labels: labelNames ,
                show: true,
                location: 's',
                renderer: $.jqplot.EnhancedLegendRenderer,
                rendererOptions:
                {
                    numberColumns: 10, 
                    numberRows: 5,
                    seriesToggle: 900,
                    disableIEFading: false
                },
                marginTop: '100px',
                marginBottom: '100px',
                placement: 'outside'
            }       
        }
    );

}

回答1:

FURTHER UPDATE:

After being a bit silly and digging down deep into the plot object of JQPlot I realised that the str variable passed into the tooltipContentEditor method has what I need. So the following is the solution:

function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
    // display series_label with x and y values value
    return plot.legend.labels[seriesIndex] + ", " + str;
}

No help or advice provided so I thought I'd provide the solution I found after spending a few hours trying to fix.

来源：https://stackoverflow.com/questions/14708178/add-legend-name-to-jqplot-tooltip-and-format-date-correctly-in-tool-tip

标签

javascript

jquery

jqplot