1

プロットの凡例名を、シリーズ ラインのマウス オーバー ツール チップに追加したいと考えています。このjqplot tooltip on bar chartのソリューションの 1 つを使用しました。

具体的には、次の関数を使用しました。

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

ただし、私が抱えている問題は、凡例名「私の凡例名」を使用せず、代わりに「シリーズ 1」または「シリーズ 5」(シリーズの位置に応じた番号) の JQPlot デフォルトを使用することです。

2 つ目の問題は、上記の関数を使い始めると、日付の書式が失われることです。したがって、tickOptions で指定した形式に変換される代わりに、たとえば 123672378328 のような数値を取得します。

チャートを生成するための私のコードは以下のとおりです。

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 に答える