2014-01-08 97 views
2

我有此線jqplot線圖:使用tooltipContentEditor顯示懸停的點的x和y值jqplot tooltipContentEditor顯示錯誤x和y值

`var line = [[1,0.493], 
      [1,1.286], 
      [2,0.305], 
      [2,0.516], 
      [2,0.551], 
      [2,0.595], 
      [2,0.609], 
      [2,0.644], 
      [2,0.65], 
      [2,1.249], 
      [2,1.265], 
      [4,0.443], 
      [5,0.288], 
      [5,0.477], 
      [5,0.559], 
      [5,0.562], 
      [6,0.543], 
      [7,0.513], 
      [7,0.549], 
      [8,0.442], 
      [8,0.467], 
      [8,0.468], 
      [8,0.597], 
      [8,0.857]];` 

林。我需要顯示的值是確切的。

下面是使用代碼進口:http://jsfiddle.net/ZQh38/1/

問題:

  1. 有時,所顯示的X和Y值是不正確的。例如,在(6,0.5)和(7,0.5)的最後一個點

  2. 的值僅顯示帶1位小數,這需要是3

因此,問題是,我如何得到確切的y值? 我也嘗試使用pointIndex,它與行中的值不匹配。

感謝您的幫助!

回答

2

這裏是解決問題的方法:jsFiddle example

我更改了highlighter選項。

/* 
Drawing graphs 
*/ 
var Statistics = { 
    scatter: false, 
    trendline: false, 
    enableLabels: true, 
    showAverage: false, 
    colour: null, 

    //Graph properties 
    scatterPlot: function(on){ 
     Statistics.scatter = on; 
    }, 
    showTrendline: function(on){ 
     $.jqplot.config.enablePlugins = on; 
     Statistics.trendline = on; 
    }, 
    disableLabels: function(yes){ 
     Statistics.enableLabels = (!yes); 
    }, 
    shouldDrawScatter: function(){ 
     return (!Statistics.scatter); 
    }, 
    useLabels: function(){ 
     return Statistics.enableLabels; 
    }, 
    getTrendline: function(){ 
     return Statistics.trendline; 
    }, 

    //Drawing 
    drawLabels: function(){ 
     document.getElementById('ylabel').innerHTML = Statistics.ylabel; 
     document.getElementById('xlabel').innerHTML = Statistics.xlabel; 
    }, 

    generateGraph: function(){ 
     var line = [[1,0.493], 
       [1,1.286], 
       [2,0.305], 
       [2,0.516], 
       [2,0.551], 
       [2,0.595], 
       [2,0.609], 
       [2,0.644], 
       [2,0.65], 
       [2,1.249], 
       [2,1.265], 
       [4,0.443], 
       [5,0.288], 
       [5,0.477], 
       [5,0.559], 
       [5,0.562], 
       [6,0.543], 
       [7,0.513], 
       [7,0.549], 
       [8,0.442], 
       [8,0.467], 
       [8,0.468], 
       [8,0.597], 
       [8,0.857]]; 

      var plot = $.jqplot('chart', [line], { 
       animate: true, 
       grid:{backgroundColor: 'white'}, 
       axes: { 
        xaxis: { 
         renderer: $.jqplot.CategoryAxisRenderer, 
         ticks: [1, 2, 3, 4, 5, 6, 7], 
         tickOptions: { 
          fontFamily: '"Helvetica", cursive', 
          fontSize: '12pt' 
         } 
        }, 
        yaxis: { 
         tickOptions: { 
          fontFamily: '"Helvetica", cursive', 
          fontSize: '12pt' 
         }, 
         max: 2, 
         min: 0 
        } 
       }, 
       series:[{ 
        color: "#594A42", 
        lineWidth: 2.5, 
        shadow: false, 
        fillColor: "#594A42", 
        markerOptions: { 
         style:'filledCircle', 
         color: "#594A42", 
         shadow: false, 
         size: 10 
        }, 
        showLine: false, 
        trendline: { 
         color: '#999' 
        }, 
        rendererOptions:{ 
         animation: { 
          speed: 2000 //Speeding up animation 
         } 
        } 
       }], 
       highlighter: { 
        show: true, 
        fadeTooltip: true, 
        sizeAdjust: 6, 
        tooltipContentEditor: function(str, pointIndex, index, plot){ 
         var splitted = plot._plotData[1][index]; 
         var x = splitted[0]; 
         var y = splitted[1]; 
         return x + ", " + y; 
        } 
       } 
      }); 
    }, 
    //Checks if the graph will be a straight line 
    straightLine: function(lineArray){ 
     if(typeof lineArray != 'undefined' && lineArray.length > 0) { 
      for(var i = 1; i < lineArray.length; i++) 
      { 
       if(lineArray[i] !== lineArray[0]) 
       return false; 
      } 
     } 
     return true; 
    }, 

}; 

Statistics.generateGraph(); 
+0

非常感謝!保存我的一天! – Malin