2014-01-24 36 views
0

我使用jqPlot來繪製出一些重量數據...如果我沒有指定在xAxis上只顯示一年,顯示器就很混亂......但是好像我無法獲取完整的日期以顯示何時任何數據點都會突出顯示。有沒有辦法讓熒光筆使用日期感知格式化程序,而不是簡單的printf? jqPlot:顯示高亮顯示的完整日期和數值,僅在軸上顯示年份?

<link rel="stylesheet" type="text/css" hrf="jqPlot/jquery.jqplot.min.css" /> 

<script> 

$(document).ready(function(){ 
    var line1= 

    [['1999.03.17',205], 
    ['2001.06.15',189], 
    ['2001.10.11',179], 
    ['2004.01.09',192.5 ], 
    ['2006.04.12',221.5], 
    ['2007.12.06',216.5], 
    ['2009.01.26',220], 
    ['2010.06.22',215], 
    ['2011.01.03',210], 
    ['2012.04.20',208], 
    ['2012.05.09',207.8], 
    ['2013.05.03',201.2], 
    ['2014.01.23',190.9] 
]; 

var plot2 = $.jqplot('chart2', [line1], { 
highlighter: { 
    show: true, 
    formatString: "%s %d", 
    tooltipAxes:'xy'   
    }, 

    axes:{ 
    xaxis:{ 
     renderer:$.jqplot.DateAxisRenderer, 
     tickOptions:{formatString:'%y'}, 
     tickInterval:'1 years' 
    } 
    }, 
    series:[{lineWidth:4, markerOptions:{show:false}}] 
}); 
}); 

回答

1

下面是解:JsFiddle

$(document).ready(function() { 
    function tooltipeditor(str, seriesIndex, pointIndex, plot) { 
     var data = plot.data[seriesIndex][pointIndex] 
     return "<div>" + data[0] + " , " + data[1] + "</div>"; 
    } 

    var line1 = 

    [ 
     ['1999/03/17', 205], 
     ['2001/06/15', 189], 
     ['2001/10/11', 179], 
     ['2004/01/09', 192.5], 
     ['2006/04/12', 221.5], 
     ['2007/12/06', 216.5], 
     ['2009/01/26', 220], 
     ['2010/06/22', 215], 
     ['2011/01/03', 210], 
     ['2012/04/20', 208], 
     ['2012/05/09', 207.8], 
     ['2013/05/03', 201.2], 
     ['2014/01/23', 190.9] 
    ]; 

    var plot2 = $.jqplot('chart1', [line1], { 
     highlighter: { 
      show: true, 
      tooltipContentEditor: tooltipeditor 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.DateAxisRenderer, 
       tickOptions: { 
        formatString: '%y' 
       }, 
       //tickInterval: '1 years' 
      } 
     }, 
     series: [{ 
      lineWidth: 4, 
      markerOptions: { 
       show: true 
      }, 

     }] 
    }); 
});