Question

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

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

Answer 1

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

在C＃中

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

在客户端

我创建了一个数据数组。
如果年份数组不为null，我将其推送到数组。
我显示图表。我想我可能需要创建一个用于保存标签的数组，但是当没有相应的图表时，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}]
        });
    };

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

1 个答案: