JQPlot折線圖上的自定義工具提示

我正在嘗試爲折線圖獲取自定義工具提示，因爲我希望工具提示更詳細地描述點而非該點的值。（附圖進一步解釋了我的情況）JQPlot折線圖上的自定義工具提示

我已經嘗試過如何去做。

下面是我的代碼：

<script type="text/javascript">  $('#page3a').live('pageshow', function() { 
     var s1 = [1, 2, 3, 4, 5]; 
     var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"]; 

     var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], { 

      animate: true, 
      seriesDefault: { 
       showMarker: false, 
       pointLabels: { show: true } 
      }, 

      grid: { 
       drawBorder: false, 
       drawGridlines: false, 
       background: '#eafaff', 
       shadow: false 
      }, 
      axesDefaults: { 
       show: false, 

       showTicks: false, 
       showTickMarks: false 

      }, 

      highlighter: { 
       show: true, 
       sizeAdjust: 8, 
       tooltipLocation: 'n', 
       tooltipAxes: 'piered', 
       formatString:'%s', 
       fadeTooltip: true, 
       tooltipFadeSpeed: "fast", 
       useAxesFormatters: false 

      } 

     }); 
    });</script>

任何幫助將不勝感激。 :)

來源

2013-02-12 Joz

我做了細微的修改，以nick_w的答案。但是我現在已經達到了預期的效果，只是粘貼代碼以便在將來幫助其他人。

<script type="text/javascript">  

    $('#page3a').live('pageshow', function() { 
      var s1 = [1, 2, 3, 4, 5]; 
      var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"]; 

      var lineGraph1 = $.jqplot('lineGraph1', [s1, s2], { 

       animate: true, 
       seriesDefault: { 
        showMarker: false, 
        pointLabels: { show: true } 
       }, 

       grid: { 
        drawBorder: false, 
        drawGridlines: false, 
        background: '#eafaff', 
        shadow: false 
       }, 
       axesDefaults: { 
        show: false, 

        showTicks: false, 
        showTickMarks: false 

       } 
      }); 

      $('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) { 

       var mouseX = ev.mouseX; //these are going to be how jquery knows where to put the div that will be our tooltip 
       var mouseY = ev.mouseY; 
       $('#chartpseudotooltip').html(s2[pointIndex]); 
       var cssObj = { 
        'position': 'absolute', 
        'font-weight': 'bold', 
        'left': mouseX + 'px', //usually needs more offset here 
        'top': mouseY + 'px', 
        'background-color': 'white', 
        'z-index':'1' 
       }; 
       $('#chartpseudotooltip').css(cssObj); 

      }); 

      $('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) { 
       $('#chartpseudotooltip').html(''); 
      }); 
     });</script>

要調用此腳本，我的內容div中添加了以下內容。

<div id="lineGraph1" style="margin-top: 20px; margin-left: 160px; width: 350px; height: 350px"> 
     <div id="chartpseudotooltip"></div>

來源

2013-02-15 10:24:55 Joz

如果你總是想點前值文本「消息」，你只是需要將其添加在formatString中：

highlighter:{ 
    show: true, 
    formatString: 'Message %s', 
    //other stuff like sizeAdjust... 
}

您可以使用您的S2的變量太多，如果它對應於蜱要顯示：

axes: { 
    yaxis: { 
     ticks: s2, 
     tickRenderer: ... 
    } 
}

來源

2013-02-13 13:54:36 AnthonyLeGovic

嗨安東尼，謝謝你的留言。我認爲我沒有正確解釋這個問題。我想創建一個使用jQplot的線圖，我正在使用s1生成線圖，但我試圖使用s2數據來顯示而不是s1在工具提示上。例如，如果我將鼠標懸停在第一個工具提示上，它會給我更有意義的描述。這就是爲什麼我試圖用s2來做到這一點。 – Joz 2013-02-14 10:33:08

我知道pieRenderer可以傳遞這樣的信息[「關於數據的信息」，10]，然後我可以使用pieRenderer來繪製使用y值，但是當我將鼠標懸停在上面時，熒光筆只顯示X值。我試圖用線圖做到這一點，它不起作用。是否有線圖的特殊渲染器，我可以做到這一點？ – Joz 2013-02-14 10:34:40

首先抱歉誤會。正如我所說，你可以顯示s2作爲你的xaxis（或yaxis）的滴答聲：{xaxis（或yaxis）：{ticks：s2}}。然後在熒光筆選項中，您可以使用'tooltipAxes：x'（或y如果在yaxis上顯示滴答聲）選項來定義在工具提示中顯示哪些軸。 [Jqplot熒光筆文檔]（http://www.jqplot.com/docs/files/plugins/jqplot-highlighter.jtml?$.jqplot.Highlighter.tooltipAxes） – AnthonyLeGovic 2013-02-14 11:13:01

<script type="text/javascript">  $('#page3a').live('pageshow', function() { 
     var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5]]; 
     var s2 = [["Message 1"], ["Message 2"], ["Message 3"], ["Message 4"], ["Message 5"]]; 

     var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], { 


      seriesDefault: { 
       showMarker: false, 
       pointLabels: { show: true } 
      }, 

      grid: { 
       drawBorder: false, 
       drawGridlines: false, 
       background: '#eafaff', 
       shadow: false 
      }, 
      axes: { 

       xaxis: {ticks: s2} 


      }, 

       highlighter: { 
       show: true, 
       sizeAdjust: 8, 
       tooltipLocation: 'n', 
       tooltipAxes: 'x', 
       formatString: '%s', 


      } 

     }); 
    });</script>

來源

2013-02-14 13:58:47 Joz

軸：{xaxis：{渲染器：$ .jqplot.CategoryAxisRenderer，ticks：s2，tickRenderer：$ .jqplot.CanvasAxisTickRenderer}}。確保加載jqplot.canvasAxisTickRenderer.min.js。我不在家，所以我還沒有測試過。 – AnthonyLeGovic 2013-02-14 15:15:59

[Fiddle here]（http://jsfiddle.net/AnthonyLeGovic/XLGFq/2/）。其結果是 - 我想 - 不完全是你想要的，因爲始終顯示工具提示。我認爲在開始（使用s2作爲蜱）不起作用（可能它會？），因爲它是顯示的元素索引 – AnthonyLeGovic 2013-02-14 15:40:35

大約是這樣（改編自jqplot tooltip on bar chart）什麼？當鼠標經過一個數據點

$('#lineGraph1').bind('jqplotDataMouseOver', function (ev, seriesIndex, pointIndex, data) { 

    var mouseX = ev.pageX; //these are going to be how jquery knows where to put the div that will be our tooltip 
    var mouseY = ev.pageY; 
    $('#chartpseudotooltip').html(s2[pointIndex] + ', (' + data[0] +', ' + data[1] + ')'); 
    var cssObj = { 
     'position' : 'absolute', 
     'font-weight' : 'bold', 
     'left' : mouseX + 'px', //usually needs more offset here 
     'top' : mouseY + 'px', 
     'background-color': 'white' 
    }; 
    $('#chartpseudotooltip').css(cssObj); 

}); 

$('#lineGraph1').bind('jqplotDataUnhighlight', function (ev) { 
    $('#chartpseudotooltip').html(''); 
});

這將繪製形式Message X, (x_value, y_value)的小工具提示。然後，您可以進一步設定工具提示的樣式。

在這個例子中提示如下：

<div id="chartpseudotooltip"></div>

來源

2013-02-15 06:22:21

我試圖實現你的方法，但我不能讓工具提示工作。下面的pastebin有我試圖實現的代碼，這是你的意思嗎？ http://pastebin.com/HrLrSDB4 – Joz 2013-02-15 09:21:01

你實際上沒有綁定事件 - 代碼沒有被調用。在創建圖之後，嘗試將它移動到'live'處理程序中做的最後一件事。 – 2013-02-15 09:38:45

感謝您的解決方案，我對代碼進行了輕微的修改，但是我已經獲得了所需的解決方案。 – Joz 2013-02-15 10:19:31

有，使您可以提供被調用來檢索提示內容自定義回調方法的配置選項：

highlighter: { 
    tooltipContentEditor: function (str, seriesIndex, pointIndex) { 
     return str + "<br/> additional data"; 
    }, 

    // other options just for completeness 
    show: true, 
    showTooltip: true, 
    tooltipFade: true, 
    sizeAdjust: 10, 
    formatString: '%s', 
    tooltipLocation: 'n', 
    useAxesFormatters: false, 
}

來源

2013-09-05 08:59:08

你可以在這裏回答jsfiddle

var line1=[['10/17/2013',21],['1/30/2014',3],['11/1/2013',12],['10/2/2013',3],['11/5/2013',18]]; 

    var line2=[['10/17/2013',41],['1/30/2014',33],['11/1/2013',12],['10/2/2013',63],['11/5/2013',18]]; 

var plot1 = $.jqplot('linegraph1', [line1,line2],{ 
    seriesDefaults: { 
    lineWidth: 1, 
    markerOptions: { 
     show: true,    // wether to show data point markers. 
     style: 'filledCircle', // circle, diamond, square, filledCircle. 
     size: 2   // size (diameter, edge length, etc.) of the marker. 
    }}, 
    axes:{ 
     xaxis:{ 
     renderer:$.jqplot.DateAxisRenderer, 

      tickOptions:{ 
      formatString:'%b&nbsp;%#d', 
     showGridline: false 
      } 
     }, 
     yaxis:{min:0,numberTicks:25, 
     tickOptions:{ 

     showGridline: false 
      } 
     } 
    }, 
    legend : 
    { 
     "show" : true, 
     location: 'se' 
    }, 
    series : [ 
     { 
      label : "line1",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Blue: %s <br/>custom tooltip<span></div>"} 

     }, 
     { 
      label : "line2",highlighter: {formatString: "<div style='text-align:center;'><span>%s </span><br/><span> Orange: %s <br/>custom tooltip<span></div>"}, 

     } 
    ], 
    highlighter: { 
     show: true, 
     sizeAdjust: 25.5, 
     tooltipLocation: 's' 
    } 
    });

來源

2014-02-08 10:59:30 bcorn

JQPlot折線圖上的自定義工具提示

回答

相關問題