Question

我想将绘图的图例名称添加到鼠标上方的工具提示中。我已经使用了其中一个解决方案jqplot tooltip on bar chart。

具体来说，我使用了以下功能：

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

但是，我遇到的问题是它没有使用图例名称'我的图例名称'而是使用JQPlot默认的'Series 1'或'Series 5'（编号取决于系列位置）。

第二个问题是我开始使用上述功能后会丢失日期格式。所以我得到一个数字，例如类似于123672378328，而不是将其转换为我在tickOptions中指定的格式。

我生成图表的代码如下：

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'
            }       
        }
    );

}

Answer 1

进一步更新：

在有点愚蠢并深入挖掘JQPlot的绘图对象后，我意识到传递给tooltipContentEditor方法的str变量具有我需要的东西。所以以下是解决方案：

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

没有提供任何帮助或建议，所以我想我会在花费几个小时试图修复之后提供解决方案。

将图例名称添加到JQPlot工具提示并在工具提示中正确格式化日期

1 个答案: