2013-02-23 48 views
0

無法讀取higthlighter選項中的值我需要顯示點的一些細節,而用戶onhover鼠標(點擊也可以)。問題是我無法從設置jqplot高亮選項的時候獲得良好的數據。在JqPlot

雖然熒光筆設置爲默認值,但它顯示值ok(與軸上的相同 - 但我需要格式化它)。所以我用highlighter: {formatString:...}但我只能得到靜態文本

這是代碼(如串並沒有得到解析任何變量裏面。):

 $(document).ready(function(){ 

    var line1 = [['2013-02-01 09:12:03',120.4],['2013-02-01 09:23:00',121.6],['2013-02-02 09:39:28',120.1],['2013-02-02 09:47:23',119.0],['2013-02-04 09:10:33',117.4],['2013-02-04 09:15:54',118.2],['2013-02-05 09:32:25',121.3],['2013-02-05 09:39:27',123.4],['2013-02-06 08:54:20',120.4],['2013-02-06 09:02:02',121.3],['2013-02-07 08:56:49',119.3],['2013-02-07 09:11:46',120.7],['2013-02-08 09:25:14',120.8],['2013-02-08 09:42:09',122.9],['2013-02-09 10:16:35',120.1],['2013-02-09 10:33:21',121.6],['2013-02-11 10:17:52',117.9],['2013-02-11 10:25:43',119.4],['2013-02-12 09:38:00',120.8],['2013-02-12 09:47:54',121.3],['2013-02-12 10:26:11',119.0],['2013-02-13 09:33:24',121.0],['2013-02-13 09:39:17',121.1],['2013-02-13 14:13:27',121.2],['2013-02-14 08:46:32',118.5],['2013-02-14 08:55:13',119.1],['2013-02-15 09:32:48',121.5],['2013-02-15 09:38:37',121.7],['2013-02-16 10:02:50',119.3],['2013-02-16 10:07:35',119.5],['2013-02-18 09:49:57',119.9],['2013-02-18 09:57:26',120.6],['2013-02-19 10:38:43',119.6],['2013-02-19 10:56:14',120.8],['2013-02-20 09:20:57',119.2],['2013-02-20 09:30:46',119.9],['2013-02-21 09:19:57',119.9],['2013-02-21 09:25:40',119.7],]; 
    var line_oczekiwana_srednia=[['2013-02-01 ',121.0000],['2013-02-21 ',121.0000]]; 

    var line_sd_plus_1=[['2013-02-01 ',123.42],['2013-02-21 ',123.42]]; 
    var line_sd_plus_2=[['2013-02-01 ',125.84],['2013-02-21 ',125.84]]; 
    var line_sd_plus_3=[['2013-02-01 ',128.26],['2013-02-21 ',128.26]]; 
    var line_sd_plus_4=[['2013-02-01 ',130.68],['2013-02-21 ',130.68]]; 
    var line_sd_minus_1=[['2013-02-01 ',118.58],['2013-02-21 ',118.58]]; 
    var line_sd_minus_2=[['2013-02-01 ',116.16],['2013-02-21 ',116.16]]; 
    var line_sd_minus_3=[['2013-02-01 ',113.74],['2013-02-21 ',113.74]]; 
    var line_sd_minus_4=[['2013-02-01 ',111.32],['2013-02-21 ',111.32]]; 

    var line_punty_przekraczajace_SD = []  
    //var line_punty_przekraczajace_reguly_westgarda_SD = [] 
    var line_WEST1 = [];var line_WEST3 = [];var line_WEST8 = [];var line_WEST9 = [];var line_WEST12 = [];  


    var plot2 = $.jqplot('chart2', [line_sd_plus_1, line_sd_plus_2, line_sd_plus_3, line_sd_plus_4, line_oczekiwana_srednia, line_sd_minus_1, line_sd_minus_2, line_sd_minus_3, line_sd_minus_4, line1, line_WEST1, line_WEST3, line_WEST8, line_WEST9, line_WEST12, ], { 
     animate: true, 
     title:'Dane materiału CONTROL SERUM 1 031(Surowica). ', 
     axes:{ 
      xaxis:{ 
      renderer:$.jqplot.DateAxisRenderer, 
      tickOptions:{ 
       formatString:'%#d-%m-%y %#H:%M', 
       angle: -30, 
      }, 
      tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
      label:'Start: 2013-2-1 Koniec: 2013-2-21', 
      labelOptions:{ 
       fontFamily:'Helvetica', 
       fontSize: '14pt' 
      }, 
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
      },   
      yaxis:{ 
      //min:111.32, 
      //max:130.68, 
      numberTicks: 9, 

      ticks:[[111.32,'111.32(-SD4)'],[113.74,'113.74(-SD3)'],[116.16,'116.16(-SD2)'],[118.58,'118.58(-SD1)'],[121.0000,'121.0000'],[123.42,'123.42(+SD1)'],[125.84,'125.84(+SD2)'],[128.26,'128.26(+SD3)'],[130.68,'130.68(+SD4)']], 
      renderer:$.jqplot.LogAxisRenderer, 
      tickOptions:{ 
       showGridline: false, 
       formatString:'Wynik: %.1f', 
       //formatString:'SD', 
       labelPosition: 'middle', 
       angle:-0, 
      }, 
      tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
      labelRenderer: $.jqplot.CanvasAxisLabelRenderer, 
      labelOptions:{ 
       fontFamily:'Helvetica', 
       fontSize: '14pt' 
      }, 
      label:'Wartości w mmol/l' 
      },  
     }, 
     highlighter: { 
      show: true, 
      sizeAdjust: 12.5, 
      tooltipFadeSpeed: 'fast', 
      //formatString:'<table><tr><td>Data: %Y-%m-%d.%H:%M:%S</td></tr><tr><td>Wynik: %.1f</td></tr></table>' 
     }, 
     cursor: { 
      show: true, 
      zoom:true, 
      dblClickReset:true, 
      tooltipLocation:'sw' 
     },   
     series:[ 
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      {lineWidth:1, color: '#76a4e8', showMarker: false}, 
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      {lineWidth:1, color: '#d8d8d8', showMarker: false},                
      {lineWidth:1, color: '#d8d8d8', showMarker: false}, 
      { 
      lineWidth:0.5, 
      color: 'green', 
      rendererOptions: {animation: {speed: 1500}}, 
      markerOptions:{color: 'green', 
      style:'filledSquare'}, 
      highlighter: {formatString:'<table><tr><td>Data: %Y-%m-%d.%H:%M:%S</td></tr><tr><td>Wynik: %.1f</td></tr></table>'}    
      }, 
      {showLine: false, color: 'red', markerOptions:{color: 'red', style:'filledSquare'}},{showLine: false, color: 'red', markerOptions:{color: 'red', style:'filledSquare'}},{showLine: false, color: 'red', markerOptions:{color: 'red', style:'filledSquare'}},{showLine: false, color: 'red', markerOptions:{color: 'red', style:'filledSquare'}},{showLine: false, color: 'red', markerOptions:{color: 'red', style:'filledSquare'}}, 
     ], 
     legend:{ 
      renderer: jQuery.jqplot.EnhancedLegendRenderer, 
      show: true, 
      hideZeros: true, 
      location: 'e', 
      labels: [ 'SD+4 (130.68)', 'SD+3 (128.26)', 'SD+2 (125.84)', 'SD+1 (123.42)','Oczekiwane (121.0000)', 'SD-1 (118.58)', 'SD-2 (116.16)', 'SD-3 (113.74)', 'SD-4 (111.32)', 'Wyniki kontroli', 'Reguła WEST1 1-2s (brak)', 'Reguła WEST3 1-3s (brak)', 'Reguła WEST8 2-2s (brak)', 'Reguła WEST9 4-1s (brak)', 'Reguła WEST12 3-1s (brak)', ], 
      placement: 'outsideGrid' 
     }   

    }); 
    }); 
    </script> 

    <!-- jqPlot --> 
    <script class="include" type="text/javascript" src="plugins/jqPlot/jquery.jqplot.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.highlighter.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.cursor.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script> 
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.enhancedLegendRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.canvasTextRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="plugins/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script> 

而這就是我得到:

enter image description here

%Y%m%d ....和其他沒有被翻譯。爲什麼我無法獲得適當的價值? Thanx提前。

回答

2

默認情況下,useAxesFormatters在熒光筆上設置爲true。這意味着您實際上正在接收由軸格式化程序格式化的數據。在你的情況下,這兩個格式化程序將生成'%#d-%m-%y %#H:%M'形式的日期值和'Wynik: %.1f'形式的y軸值。

這意思是,您可以將一系列熒光筆格式改成這樣:

formatString:'Data: %s, %s' 

當應用時,第一%s被格式化的日期字符串替換(例如,13年5月2日9:39 ),第二個將被格式化的Wynik值替換(例如,Wynik 123.4)。

查看docs瞭解更多詳情。

+0

工作得很好!大THX! – 2013-02-27 13:22:35