Как визуализировать jquery jqplot Трехлетний линейный график с датой оси рендеринга

Question

Я хотел бы иметь возможность использовать jqplot, чтобы складывать данные трех разных лет друг на друга, чтобы сравнивать данные соответствующим образом.Единственный найденный мной способ сделать это - «взломать» даты каждой серии результатов, чтобы использовать один и тот же год в качестве базовой.лучше починить?

Answer 1

Я использую C # и javascript, чтобы сделать это для данных за 2 года.

В C #

1. Я выполняю 2 запроса к базе данных, получая данные year1 и year2.
2. Я перебираю данные года2, устанавливая год, совпадающий с годом1
3. Я передаю эти данные клиенту в двух массивах.Если данных за один год нет, я устанавливаю массив в нуль.При отправке пустого массива jqplot отображает пустой график.
4. Я нажимаю две метки, например, 2011 и 2010.

На клиенте

1. Iсоздать массив данных.
2. Если массив года не равен нулю, я помещаю его в массив.
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}]
        });
    };