在工具提示中正确的添加legend名称到JQPlot工具提示和格式日期。

时间:2022-09-15 10:52:58

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.

我想把这个故事的传奇名字添加到鼠标的一个系列的工具提示上。我使用了这个jqplot工具条的一个解决方案。

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).

但是,我的问题是,它不会使用legend name' My legend name',而是使用JQPlot默认的'Series 1'或'Series 5'(根据系列位置的数字)。

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.

第二个问题是,一旦我开始使用上面的函数,我就会失去我的日期格式。所以我得到了一个数字,比如123672378328,而不是我在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  %#d  %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 个解决方案

#1


2  

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:

在对JQPlot的plot对象进行了一些愚蠢的挖掘之后,我意识到传递到tooltipContentEditor方法中的str变量有我所需要的。下面是解决方案:

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.

没有提供任何帮助或建议,所以我想我应该提供我在花了几个小时试图解决问题后找到的解决方案。

#1


2  

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:

在对JQPlot的plot对象进行了一些愚蠢的挖掘之后,我意识到传递到tooltipContentEditor方法中的str变量有我所需要的。下面是解决方案:

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.

没有提供任何帮助或建议,所以我想我应该提供我在花了几个小时试图解决问题后找到的解决方案。