JqPlot 1.0如何用日期軸和圖例創建折線圖

這是我的問題。我有一個帶有JqPlot的線性圖表，我需要顯示圖例，但我不知道如何更改系列名稱。我們如何做到這一點？

這是我的代碼。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> 

<script type="text/javascript" language="javascript"> 
$(document).ready(function(){ 
    var line1=[['2008-06-30',4], ['2008-7-14',6.5], ['2008-7-28',5.7], ['2008-8-11',9],  ['2008-8-25',8.2]]; 
    var line2=[['2008-06-30',8], ['2008-7-14',5], ['2008-7-28',7], ['2008-8-11',2],  ['2008-8-25',2]]; 
    var plot2 = $.jqplot('conteneur', [line1,line2], { 
     title:'Customized Date Axis', 
     seriesDefaults: { 
      rendererOptions: { 
       ////// 
       // Turn on line smoothing. By default, a constrained cubic spline 
       // interpolation algorithm is used which will not overshoot or 
       // undershoot any data points. 
       ////// 
       smooth: true 
      } 
     }, 
      legend:{ show: true } , 
     axes:{ 
     xaxis:{ 
      renderer:$.jqplot.DateAxisRenderer, 
      tickOptions:{formatString:'%b %#d, %#I %p'}, 
      min:'June 16, 2008', 
       tickInterval:'1 month' 
     } 
     }, 
     series:[{lineWidth:4, markerOptions:{style:'square'}}] 
    }); 
}); 
</script> 

</head> 
<body> 

<div id="conteneur"></div> 

</body> 
</html>

我真正想要做的是，在傳說中的「系列1」，「系列2」是由他們的系列名稱（例如：「騎士」和「多倫多」）調用。但我應該把它放在代碼中？

謝謝。

來源

2012-07-24 m4dd

您應該添加：

series: [ 
       { label: 'Toronto' }, 
       { label: 'New York' } 
     ]

這是完整的代碼：

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    var line1 = [['2008-06-30', 4], ['2008-7-14', 6.5], ['2008-7-28', 5.7], ['2008-8-11', 9], ['2008-8-25', 8.2]]; 
    var line2 = [['2008-06-30', 8], ['2008-7-14', 5], ['2008-7-28', 7], ['2008-8-11', 2], ['2008-8-25', 2]]; 
    var plot2 = $.jqplot('conteneur', [line1, line2], { 
     title: 'Customized Date Axis', 
     seriesDefaults: { 
      rendererOptions: { 
       ////// 
       // Turn on line smoothing. By default, a constrained cubic spline 
       // interpolation algorithm is used which will not overshoot or 
       // undershoot any data points. 
       ////// 
       smooth: true 
      } 
     }, 
     legend: { show: true }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.DateAxisRenderer, 
       tickOptions: { formatString: '%b %#d, %#I %p' }, 
       min: 'June 16, 2008', 
       tickInterval: '1 month' 
      } 
     }, 
     series: [{ lineWidth: 4, 
      markerOptions: { style: 'square' } 

     }], 
     series: [ 
       { label: 'Toronto' }, 
       { label: 'New York' } 
     ], 
    }); 
});

來源

2012-07-24 19:01:40

謝謝！我也這麼想！ – m4dd 2012-07-30 19:52:37

很高興幫助。請記住接受這個答案。 – 2012-07-30 20:48:15

JqPlot 1.0如何用日期軸和圖例創建折線圖

回答

相關問題