如何渲染jquery jqplot 3年堆积线图与日期轴渲染

时间:2011-11-22 00:06:26

标签: jqplot

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

这不是很理想,并且想知道是否有人找到了更好的解决办法?

1 个答案:

答案 0 :(得分:0)

我使用C#和javascript来做2年的数据。

在C#中

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

    1. 我创建了一个数据数组。
    2. 如果年份数组不为null,我将其推送到数组。
    3. 我显示图表。我想我可能需要创建一个用于保存标签的数组,但是当没有相应的图表时,jqplot不会显示标签。如果你这样做了三年,你需要有一个单独的标签阵列。
    4. 这是我的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}]
              });
          };