如何呈现jquery jqplot具有日期轴的3年堆叠折线图呈现

Question

我希望能够使用jqplot在彼此之上堆叠3年不同年份的数据以相应地比较数据。我发现的唯一方法是“破解”每个结果系列的日期，以同一年为基准日期。

这不完全理想，想知道是否有人找到了更好的解决办法？

Answer 1

我使用C＃和JavaScript来做这2年的数据。

在C＃

1. 我执行2个查询数据库中获取数据YEAR1和YEAR2数据。
2. 我循环通过year2数据设置年份与年份1相同
3. 我将这些数据推送到两个数组中的客户端。如果一年中没有数据，我将数组设置为null。发送一个空数组使jqplot显示一个空图。
4. 我推两个标签例如2011和2010

在客户

1. 我创建数据的数组。
2. 如果year数组不为空，我将它推到数组中。
3. 我显示图表。我想我可能需要创建一个数组来保存标签，但当没有相应的图表时，jqplot不显示标签。如果你这样做了三年，你将需要一个单独的标签阵列。

这里是我的C＃代码：

 protected void btnShowGraph_Click(object sender, EventArgs e) 
     { 
      SomeRatingSummary SearchCriteria = GetSearchCriteria(); 
      var year1Results = SearchCriteria.ExecuteFind(); 
      string year1Label = SearchCriteria.YearTypeCode; 
      StringBuilder year1 = getJavaScriptArrayFromRatingsData(year1Results); 

      int year1int = int.Parse(year1Label); 
      SearchCriteria.YearTypeCode = (year1int - 1).ToString(); 
      var year2Results = SearchCriteria.ExecuteFind(); 
      year2Results.ToList().ForEach(a => a.FirstSeasonRating = DateTime.Parse(a.FirstSeasonRating).AddYears(1).ToShortDateString()); 
      var year2Label = SearchCriteria.YearTypeCode; 
      StringBuilder year2 = getJavaScriptArrayFromRatingsData(year2Results); 

      string script = " jQuery(document).ready(function() {{drawChart('{0}','{1}',{2},{3});}});"; 
      string filledScript = String.Format(script, year1Label, year2Label, year1, year2); 
      this.Page.ClientScript.RegisterStartupScript(this.GetType(), "callChart", filledScript, true); 
     } 

     private static StringBuilder getJavaScriptArrayFromRatingsData(SubSonicList<SomeRatingSummary> results) 
     { 
      var firstYear = results.OrderBy(srs => srs.FirstSeasonRating).GroupBy(a => a.FirstSeasonRating).Select(g => new { value = g.Key, count = g.Count() }); 
      string prefix = "["; 
      StringBuilder year1 = new StringBuilder(prefix); 
      firstYear.ToList().ForEach(a => year1.AppendFormat("['{0}', {1}],", a.value, a.count)); 
      if (year1.Length > prefix.Length) 
      { 
       year1.Length = year1.Length - 1; 
       year1.Append("]"); 
      } 
      else 
      { 
       year1.Length = 0; 
       year1.Append("null"); 
      } 
      return year1; 
     } 

这里是我的JavaScript代码：

function drawChart(year1Label, year2Label, year1Data, year2Data) { 
     //these are two sample charts. 
     //var line1 = [['2008-09-30 4:00PM', 1], ['2008-8-30 4:00PM', 3], ['2008-11-30 4:00PM', 5], ['2008-12-30 4:00PM', 7], ['2009-01-30 4:00PM', 9]]; 
     //var line2 = [['2008-09-31 4:00PM', 5], ['2008-10-20 4:00PM', 2], ['2008-11-15 4:00PM', 4], ['2008-12-16 4:00PM', 9], ['2009-01-29 4:00PM', 8]]; 
     var chartData = [year1Data]; 
     if (year2Data != null) { 
      chartData.push(year2Data); 
     } 

     var plot1 = jQuery.jqplot('chart1', chartData, { 
      grid: { 
       //background:'#f0ffff', 
       background: '#F0F8FF', 
       gridLineColor: '#dfdfdf', 
       borderWidth: 1.5 
      }, 
      title: 'Ratings by Day', 
      axes: { xaxis: { 
       renderer: jQuery.jqplot.DateAxisRenderer, 
       rendererOptions: { tickRenderer: jQuery.jqplot.CanvasAxisTickRenderer }, 
       tickInterval: '2 month', 
       tickOptions: { formatString: '%b' } 
      } 
      }, 
      legend: { show: true, location: 'e', showSwatch: true }, 
      seriesDefaults: { showMarker: false, lineWidth: 1.5, markerOptions: { style: 'square'} }, 
      series: [{ label: year1Label }, { label: year2Label}] 
     }); 
    };