1

我想将绘图的图例名称添加到系列线的鼠标悬停工具提示中。我在 bar chart 上使用了这个 jqplot 工具提示的解决方案之一。

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

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 默认的“系列 1”或“系列 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  %#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'
            }       
        }
    );

}

4

1 回答 1

2

进一步更新：

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

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

没有提供帮助或建议，所以我想我会在花了几个小时尝试修复后提供我找到的解决方案。

于 2013-02-14T12:11:55.463 回答