ایجاد نمودار با استفاده از Google Chart API.

من همیشه تعجب کرده ام که چگونه عبارتی مانند "یک عکس جایگزین هزار کلمه می شود" ظاهر شد. به راحتی می توان آن را به مدیران نسبت داد، زیرا آنها هستند که پس از مشاهده لیست طولانی اعداد، می توانند نموداری را در انتهای صفحه پیدا کنند که همه اعداد را ترکیب می کند و از این طریق عبارت داده شده را نشان می دهد. نمودارها و نمودارها ارائه می کنند بررسی کوتاه تعداد زیادیاطلاعات با کمک یک نمودار، فرد می تواند به سرعت متوجه هر روندی شود، نتایج مختلف را مقایسه کند یا یک الگو را متوجه شود.

راه های زیادی برای ایجاد نمودار در یک صفحه وب ASP.NET وجود دارد. می توانید از کلاس های موجود در فضای نام System.Drawing برای ایجاد نمودار استفاده کنید به صورت برنامه ای... همچنین می توانید استفاده کنید مایکروسافت آفیساجزای وب (OWC). رایگان نیز وجود دارد نرم افزاردر قالب ابزار رسم نمودار، و همچنین فراوانی اجزای شخص ثالث. مایکروسافتهمچنین وارد بازی شد و مایکروسافت نمودار کنترل را برای چارچوب خالص 3.5 SP1 (کنترل نمودار برای .NET Framework 3.5 SP1).

این مقاله به روشی برای استفاده از Google Chart API برای ایجاد نمودارها می پردازد. Google Chart API است خدمات رایگاناز جانب گوگل، که به توسعه دهندگان برنامه های کاربردی وب اجازه می دهد تا با ایجاد یک عنصر، تصاویر نمودار را در لحظه ایجاد کنند با یک ویژگی src که به پیوند URL که شامل داده‌های نمودار، برچسب‌ها و سایر اطلاعات رشته پرس و جو است اشاره می‌کند. به عنوان مثال، نمودار نشان داده شده در سمت راست در http://chart.apis.google.com/chart?cht=p&chs=225x150&chd=t:100,30,70,25&chl=Q1|Q2|Q3|Q4&chtt= موجود است 2008 % 20 فروش % 20 در % 20 سه ماهه. برای یادگیری نحوه استفاده از Google Chart API در وب سایت ASP.NET خود، ادامه مطلب را بخوانید!

نمای کلی Google Chart API

Google Chart API به توسعه دهندگان این امکان را می دهد که انواع مختلفی از نمودارها را در لحظه ایجاد کنند. Google Chart API توسط پیوندی به یک منبع (URL) در سرورهای وب Google ذخیره می شود و هنگامی که یک پیوند (URL) با فرمت مناسب دریافت می شود، نمودار را به عنوان یک تصویر برمی گرداند. ویژگی های نمودار (رنگ ها، عنوان ها، محورها، نقاط روی نمودار، و غیره) از طریق یک رشته جستجوی پیوند (URL) مشخص می شوند. تصویر حاصل را می توان با استفاده از عنصر نمایش داد ، یا می توان در آن ذخیره کرد سیستم فایلوب سرور شما یا در پایگاه داده بهترین جنبه این است که Google Chart API رایگان است و نیازی به آن ندارد حسابو طی مراحل ثبت نام!

لینک اصلی Google Chart API است http://chart.apis.google.com/chart؟... پارامترهایی که نمایش نمودار را تعیین می کنند پس از نماد؟ پارامترهای زیادی وجود دارد که می توانید از طریق رشته کوئری مشخص کنید. تنها آنها پارامترهای مورد نیازاندازه نمودار (chs)، داده نمودار (chd) و نوع نمودار (cht). جدول زیر برخی از پارامترهای مورد استفاده را شرح می دهد:

توجه داشته باشید که نقاط نمودار ارسال شده در پارامتر chd مواردی نیستند که ما می خواهیم در نمودار ترسیم کنیم - 43، 23، 12، 62، 34 و 39. در عوض، درصدها به بزرگترین مقدار این نقاط ارسال شد. به عبارت دیگر، نقطه نمودار ایکسبا استفاده از عبارت (( ایکس / maxDataPoint) * 100. به عنوان مثال، مقدار واقعی 43 می شود 43/62 * 100 = 69.3.

و خروجی زیر را دریافت خواهید کرد:

خوب به نظر می رسد، اینطور نیست؟ این نموداربسیار ساده است و ساخت آن 1.5 ثانیه طول کشید. اگر زمان بیشتری را صرف تحقیق کنید قابلیت های گوگلنمودار API، سپس پارامترهایی را پیدا خواهید کرد که می توانید از آنها برای تعیین رنگ ها، افزودن محورها، برچسب ها و موارد دیگر استفاده کنید. ویژگی های استاندارد... به عنوان مثال، ما می توانیم مقادیر عددی را در محور Y اضافه کنیم تا تعداد بازدیدها و مقادیر روز را در محور X با به روز رسانی پیوند برای استفاده نشان دهیم. خط بعدیدرخواست:? cht = lc & chs = 300x200 & chd = t: 69.3,37.1,19.4,100.0,54.8,62.9 & chds = 0,62 & chtt = ماهیانه% 20 ترافیک & chxt = x، y و chxl = 0: | اول | هفتم | چهاردهم | بیست و یکم | سی و یکم و chxr = 1.0.62

نمودار به این صورت خواهد بود:

ایجاد نمودار گوگل برای صفحه ASP.NET با استفاده از اطلاعات پایگاه داده

با کار بیشتر، باید بتوانید نموداری را بر اساس مقادیر پایگاه داده ایجاد کنید کمک گوگلنمودار API. ما فقط باید یک رشته پرس و جو مناسب را بر اساس داده هایی که می خواهیم برای آن ایجاد کنیم، نوع نمودار و برچسب های محورهای X و Y (در صورت وجود) ایجاد کنیم. بعداً در این مقاله، ساخت یک رشته پرس و جو در صفحه ASP.NET برای پرس و جوی پایگاه داده را بررسی خواهیم کرد که فروش را بر اساس ماه برای معامله گران Northwind برمی گرداند. کد کار را می توانید در انتهای مقاله دانلود کنید.

اولین قدم ایجاد یک کوئری است که داده های مورد نیاز را برمی گرداند. مثال من از پایگاه داده Northwind استفاده می کند که اطلاعات محصولات، مشتریان، سفارشات و غیره را ذخیره می کند. برای این مثالتصمیم گرفتم نموداری از فروش ناخالص بر اساس ماه یک سال ایجاد کنم. کوئری زیر برمی گردد این اطلاعاتبرای یک سال معین:

SELECT MONTH (o.OrderDate) AS MonthVal، SUM (od.UnitPrice * od.Quantity) AS مجموع
از سفارشات AS o
پیوستن داخلی AS od ON
od.OrderID = o.OrderID
WHERE (سال (o.OrderDate) = @Year)
گروه به ماه (o.OrderDate)
سفارش بر اساس MonthVal

پایگاه داده Northwind برای سال های 1996، 1997 و 1998 فروش داشته است. اگر یکی از این مقادیر را به عنوان پارامتر به @Year ارسال کنید، نتایج زیر را دریافت خواهید کرد:

این مثال کوئری ارجاع شده را در یک کنترل SqlDataSource مشخص می کند و نتایج را در صفحه ای در کنترل GridView نمایش می دهد. GridView برای نمایش نتایج برای ستون Total در قالب ارز سفارشی شده است و همچنین ستون MonthVal را طوری قالب بندی کرده است که هر ردیف فقط شامل سه حرف اول هر ماه باشد. این قالب بندی MonthVal در حال پردازش است عملکرد کمکیدر کد پس زمینه، یعنی DisplayMonthName، که ماه را به عنوان در نظر می گیرد مقدار عددی(1، 2، ...، 12) و یک مقدار قالب بندی شده ("Jan"، "Feb"، ...، "Dec") را برمی گرداند. من همچنین یک کنترل DropDownList به صفحه اضافه کردم تا کاربر بتواند مقداری را برای پارامتر @Year مشخص کند - DropDownList در سال های 1996، 1997 و 1998 کدگذاری شده است.

علاوه بر کنترل‌های SqlDataSource، GridView و DropDownList برای سال، صفحه شامل یک کنترل تصویر برای نمایش نمودار است. ویژگی ImageUrl عنصر Image به صورت برنامه ریزی شده روی پیوند URL مربوطه در کلاس کد پس زمینه تنظیم می شود. این در روش DisplayChart انجام می شود. این روشبا ایجاد بدنه اصلی پیوند (url) - نوع نمودار (cht)، اندازه نمودار (chs) و عنوان نمودار شروع می شود. نوع و اندازه نمودار با مقادیر انتخاب شده توسط کاربر با استفاده از کنترل های DropDownList دیکته می شود.

DisplayChart فرعی محافظت شده ()
"ساخت یک نمودار پیوند
ChartUrl کم نور به عنوان StringBuilder جدید ("http://chart.apis.google.com/chart?")

"افزودن یک نوع نمودار
chartUrl.AppendFormat ("cht = (0)"، Server.UrlEncode (ddlChartType.SelectedValue))

"افزودن اندازه نمودار
chartUrl.AppendFormat ("& chs = (0)"، Server.UrlEncode (ddlChartSize.SelectedValue))

"افزودن عنوان
chartUrl.AppendFormat ("& chtt = (0)"، Server.UrlEncode ("Sales for" & ddlYear.SelectedValue))

سپس متد Select از SqlDataSource فراخوانی می شود. این نتایج شمارش شده و مقادیر آنها در لیستی از مقادیر اعشاری (اعشاری) (literalDataPointsList) جمع‌آوری می‌شود و برچسب‌هایی برای هر نقطه داده، یعنی اختصارات هر ماه، در فهرستی از مقادیر رشته‌ای نوشته می‌شود. (xAxisLabels). هنگامی که مقادیر نقطه نمودار نوشته شد، آنها به عنوان درصدی از بزرگترین مقدار بیان می شوند و در لیستی از مقادیر رشته ای با نام relativeDataPointValues ​​ذخیره می شوند. ارزش ها در این لیستسپس به هم پیوسته (با کاما از هم جدا می شوند) و به پارامتر داده نمودار (chd) اختصاص داده می شود.

"افزودن نقاط داده نمودار. ابتدا باید داده ها را از کنترل SqlDataSource دریافت کنید.
کم نور dataPointsView As DataView = CType (dsChartData.Select (DataSourceSelectArguments.Empty)، DataView)
تیره کردن xAxisLabels به عنوان لیست جدید (از رشته)
کم نور literalDataPointsList به عنوان فهرست جدید (از اعشار)
Dim maxValue به عنوان اعشاری = 0

"خواندن نقاط داده و ذخیره حداکثر مقدار
برای هر نقطه به عنوان DataRowView در dataPointsView
«حذف سنت از هر مقدار
literalDataPointsList.Add (Convert.ToDecimal (نقطه ("Total")))

"در حال بررسی برای حداکثر جدید
اگر literalDataPointsList (literalDataPointsList.Count - 1)> maxValue سپس
maxValue = literalDataPointsList (literalDataPointsList.Count - 1)
پایان اگر

اگر ddlChartSize.SelectedIndex<>0 OrElse literalDataPointsList.Count Mod 2 = 1 سپس
xAxisLabels.Add (DisplayMonthName (Convert.ToInt32 (نقطه ("MonthVal"))))
دیگر
xAxisLabels.Add (String.Empty)
پایان اگر
بعد

"محاسبه مقادیر نسبی نقاط داده
کم نور relativeDataPointValues ​​به عنوان لیست جدید (از رشته)
برای هر نقطه به صورت اعشاری در literalDataPointsList
Dim relativeValue به صورت اعشاری = (نقطه / maxValue * 100)
relativeDataPointValues.Add (relativeValue.ToString ("0.00"))
بعد

موارد زیر برچسب‌هایی برای محورهای X و Y هستند. محور Y از 0 تا حداکثر مقدار بازگردانده شده توسط پرس و جو متغیر است، در حالی که نقاط داده محور X از لیست xAxisLabels بارگیری می‌شوند. در نهایت، به ویژگی ImageUrl عنصر Image مقدار پیوند رندر شده (URL) اختصاص داده می شود.

"افزودن دو محور
chartUrl.Append ("& chxt = x, y")

"افزودن مقادیر برای محور y
chartUrl.AppendFormat ("& chxr = 1.0، (0)"، maxValue.ToString ("0"))

"افزودن برچسب برای X-Axis
chartUrl.AppendFormat ("& chxl = 0: | (0)"، String.Join ("|"، xAxisLabels.ToArray ()))

"بارگیری chartUrl" تصویر "در ویژگی imgChart عنصر Image
imgChart.ImageUrl = chartUrl.ToString ()
پایان فرعی

در نهایت باید نمودار زیر را ببینید. شکل اول فروش سال 1996 را در نمودار خطی نشان می دهد و دومی فروش سال 1997 را با استفاده از نمودار میله ای نشان می دهد.

نتیجه

Google Chart API سریع و سریع ارائه می دهد راه اسانایجاد بسیاری انواع مختلفنمودار برای وب سایت شما برای ایجاد نمودار، باید از طریق URL به Google Chart API درخواست دهید، در حالی که ویژگی‌های نمودار (ابعاد، نقاط داده، رنگ‌ها، برچسب‌ها و غیره) را با استفاده از یک رشته جستجو ارسال می‌کنید. Chart API تصویری را برمی گرداند که می توانید در یک عنصر نمایش دهید ... با کمی کار می توانید چنین پیوند نموداری را مستقیماً از یک صفحه وب ASP.NET ایجاد کنید و همچنین نمودارهایی را بر اساس اطلاعات پایگاه داده ایجاد کنید. در این مقاله، نحوه ایجاد پیوند به صورت دستی را بررسی کردیم و در ادامه به یک کنترل تخصصی که از binding داده های اعلامی و موارد دیگر پشتیبانی می کند، نگاه خواهیم کرد. ویژگی های مفید.

از برنامه نویسی لذت ببرید!

من همیشه تعجب کرده ام که چگونه عبارتی مانند "یک عکس جایگزین هزار کلمه می شود" ظاهر شد. به راحتی می توان آن را به مدیران نسبت داد، زیرا آنها هستند که پس از مشاهده لیست طولانی اعداد، می توانند نموداری را در انتهای صفحه پیدا کنند که همه اعداد را ترکیب می کند و از این طریق عبارت داده شده را نشان می دهد. نمودارها و نمودارها یک نمای کلی سریع از بسیاری از اطلاعات را ارائه می دهند. با کمک یک نمودار، فرد می تواند به سرعت متوجه هر روندی شود، نتایج مختلف را مقایسه کند یا یک الگو را متوجه شود.

راه های زیادی برای ایجاد نمودار در یک صفحه وب ASP.NET وجود دارد. می توانید از کلاس ها در فضای نام System.Drawing برای ایجاد نمودارها به صورت برنامه نویسی استفاده کنید. شما همچنین می توانید از مایکروسافت استفاده کنید وب دفتراجزاء (OWC). همچنین نرم افزار رایگان به شکل ابزارهای ترسیم نمودار و همچنین انبوهی از اجزای شخص ثالث وجود دارد. مایکروسافت همچنین وارد عمل شده و کنترل‌های نمودار مایکروسافت را برای .NET Framework 3.5 SP1 ارائه کرده است.

این مقاله به روشی برای استفاده از Google Chart API برای ایجاد نمودارها می پردازد. Google Chart API یک سرویس رایگان از Google است که به توسعه دهندگان برنامه های کاربردی وب اجازه می دهد تا با ایجاد یک عنصر، تصاویر نمودار را در لحظه ایجاد کنند. با یک ویژگی src که به پیوند URL که شامل داده‌های نمودار، برچسب‌ها و سایر اطلاعات رشته پرس و جو است اشاره می‌کند. برای مثال، نمودار نشان داده شده در سمت راست در http://chart.apis.google.com/chart?cht=p&chs=225x150&chd=t:100,30,70,25&chl=Q1/Q2/Q3/Q4&chtt= موجود است 2008 % 20 فروش % 20 در % 20 سه ماهه. برای یادگیری نحوه استفاده از Google Chart API در وب سایت ASP.NET خود، ادامه مطلب را بخوانید!

نمای کلی Google Chart API

Google Chart API به توسعه دهندگان این امکان را می دهد که انواع مختلفی از نمودارها را در لحظه ایجاد کنند. Google Chart API توسط پیوندی به یک منبع (URL) در سرورهای وب Google ذخیره می شود و هنگامی که یک پیوند (URL) با فرمت مناسب دریافت می شود، نمودار را به عنوان یک تصویر برمی گرداند. ویژگی های نمودار (رنگ ها، عنوان ها، محورها، نقاط روی نمودار، و غیره) از طریق یک رشته جستجوی پیوند (URL) مشخص می شوند. تصویر حاصل را می توان با استفاده از عنصر نمایش داد ، یا می تواند در سیستم فایل سرور وب شما یا در پایگاه داده ذخیره شود. بهترین بخش این است که Google Chart API رایگان است و نیازی به هیچ حساب کاربری یا فرآیند ثبت نامی ندارد!

لینک اصلی Google Chart API است http://chart.apis.google.com/chart؟... پارامترهایی که نمایش نمودار را تعیین می کنند پس از نماد؟ پارامترهای زیادی وجود دارد که می توانید از طریق رشته کوئری مشخص کنید. تنها پارامترهای مورد نیاز اندازه نمودار (chs)، داده نمودار (chd) و نوع نمودار (cht) هستند. جدول زیر برخی از پارامترهای مورد استفاده را شرح می دهد:

با استفاده از اطلاعات بالا، می‌توانید ایجاد نمودارها و نمودارهای خود را با استفاده از Google Chart API آزمایش کنید. برای مثال لینک زیر ایجاد می شود نمودار خطیبا ابعاد 300x200 و مقادیر 43، 23، 12، 62، 34 و 39 و همچنین عنوان "ترافیک ماهانه": http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t :69.3،37.1، 19.4،100.0، 54.8،62.9 و chtt = ماهیانه% 20 ترافیک

توجه داشته باشید که نقاط نمودار ارسال شده در پارامتر chd مواردی نیستند که ما می خواهیم در نمودار ترسیم کنیم - 43، 23، 12، 62، 34 و 39. در عوض، درصدها به بزرگترین مقدار این نقاط ارسال شد. به عبارت دیگر، نقطه نمودار x با استفاده از عبارت (x / maxDataPoint) * 100 به درصد تبدیل می شود. به عنوان مثال، مقدار واقعی 43 می شود 43/62 * 100 = 69.3.

و خروجی زیر را دریافت خواهید کرد:

خوب به نظر می رسد، اینطور نیست؟ این نمودار بسیار ساده است و ساخت آن 1.5 ثانیه طول کشید. اگر زمان بیشتری را صرف بررسی امکانات Google Chart API کنید، پارامترهایی را خواهید یافت که می‌توانید از آنها برای تعیین رنگ‌ها، افزودن محورها، برچسب‌ها و سایر ویژگی‌های استاندارد استفاده کنید. به عنوان مثال، می‌توانیم مقادیر عددی را در محور Y اضافه کنیم تا تعداد بازدیدها و روزها در محور X را با به‌روزرسانی پیوند برای استفاده از رشته جستجوی زیر نشان دهیم: Cht = lc & chs = 300x200 & chd = t: 69.3،37.1،19.4، 100.0،54.8،62.9 و chds = 0.62 و chtt = ماهیانه% 20 ترافیک & chxt = x، y و chxl = 0: / 1st / 7th / 14th / 21st / 31st & chxr = 1.0.62

نمودار به این صورت خواهد بود:

ایجاد نمودار گوگل برای صفحه ASP.NET با استفاده از اطلاعات پایگاه داده

با کار بیشتر، می توانید نموداری بر اساس مقادیر یک پایگاه داده با استفاده از Google Chart API ایجاد کنید. ما فقط باید یک رشته پرس و جو مناسب را بر اساس داده هایی که می خواهیم برای آن ایجاد کنیم، نوع نمودار و برچسب های محورهای X و Y (در صورت وجود) ایجاد کنیم. بعداً در این مقاله، ساخت یک رشته پرس و جو در صفحه ASP.NET برای پرس و جوی پایگاه داده را بررسی خواهیم کرد که فروش را بر اساس ماه برای معامله گران Northwind برمی گرداند. کد کار را می توانید در انتهای مقاله دانلود کنید.

اولین قدم ایجاد یک کوئری است که داده های مورد نیاز را برمی گرداند. مثال من از پایگاه داده Northwind استفاده می کند که اطلاعات محصولات، مشتریان، سفارشات و غیره را ذخیره می کند. برای این مثال، تصمیم گرفتم نموداری از فروش ناخالص بر اساس ماه‌های یک سال ایجاد کنم. کوئری زیر اطلاعات داده شده را برای یک سال معین برمی گرداند:

SELECT MONTH (o.OrderDate) AS MonthVal، SUM (od.UnitPrice * od.Quantity) AS مجموع
از سفارشات AS o
پیوستن داخلی AS od ON
od.OrderID = o.OrderID
WHERE (سال (o.OrderDate) = @Year)
گروه به ماه (o.OrderDate)
سفارش بر اساس MonthVal

پایگاه داده Northwind برای سال های 1996، 1997 و 1998 فروش داشته است. اگر یکی از این مقادیر را به عنوان پارامتر به @Year ارسال کنید، نتایج زیر را دریافت خواهید کرد:

این مثال کوئری ارجاع شده را در یک کنترل SqlDataSource مشخص می کند و نتایج را در صفحه ای در کنترل GridView نمایش می دهد. GridView برای نمایش نتایج برای ستون Total در قالب ارز سفارشی شده است و همچنین ستون MonthVal را طوری قالب بندی کرده است که هر ردیف فقط شامل سه حرف اول هر ماه باشد. این قالب‌بندی MonthVal توسط یک تابع کمکی پس‌زمینه، DisplayMonthName، مدیریت می‌شود که ماه را به‌عنوان مقدار عددی (1، 2، ...، 12) می‌گیرد و یک مقدار قالب‌بندی شده ("Jan"، "Feb"، ...، "دسامبر"). من همچنین یک کنترل DropDownList به صفحه اضافه کردم تا کاربر بتواند مقداری را برای پارامتر @Year مشخص کند - DropDownList در سال های 1996، 1997 و 1998 کدگذاری شده است.

علاوه بر کنترل‌های SqlDataSource، GridView و DropDownList برای سال، صفحه شامل یک کنترل تصویر برای نمایش نمودار است. ویژگی ImageUrl عنصر Image به صورت برنامه ریزی شده روی پیوند URL مربوطه در کلاس کد پس زمینه تنظیم می شود. این در روش DisplayChart انجام می شود. این روش با ایجاد بدنه اصلی پیوند (URL) - نوع نمودار (cht)، اندازه نمودار (chs) و عنوان نمودار شروع می شود. نوع و اندازه نمودار با مقادیر انتخاب شده توسط کاربر با استفاده از کنترل های DropDownList دیکته می شود.

DisplayChart فرعی محافظت شده ()
"ساخت یک نمودار پیوند
ChartUrl کم نور به عنوان StringBuilder جدید ("http://chart.apis.google.com/chart?")

"افزودن یک نوع نمودار
chartUrl.AppendFormat ("cht = (0)"، Server.UrlEncode (ddlChartType.SelectedValue))

"افزودن اندازه نمودار
chartUrl.AppendFormat ("& chs = (0)"، Server.UrlEncode (ddlChartSize.SelectedValue))

"افزودن عنوان
chartUrl.AppendFormat ("& chtt = (0)"، Server.UrlEncode ("Sales for" & ddlYear.SelectedValue))

سپس متد Select از SqlDataSource فراخوانی می شود. این نتایج شمارش شده و مقادیر آنها در لیستی از مقادیر اعشاری (اعشاری) (literalDataPointsList) جمع‌آوری می‌شود و برچسب‌هایی برای هر نقطه داده، یعنی اختصارات هر ماه، در فهرستی از مقادیر رشته‌ای نوشته می‌شود. (xAxisLabels). هنگامی که مقادیر نقطه نمودار نوشته شد، آنها به عنوان درصدی از بزرگترین مقدار بیان می شوند و در لیستی از مقادیر رشته ای با نام relativeDataPointValues ​​ذخیره می شوند. سپس مقادیر موجود در این لیست به هم متصل می شوند (با کاما از هم جدا می شوند) و به پارامتر داده نمودار (chd) اختصاص داده می شوند.

"افزودن نقاط داده نمودار. ابتدا باید داده ها را از کنترل SqlDataSource دریافت کنید.
کم نور dataPointsView As DataView = CType (dsChartData.Select (DataSourceSelectArguments.Empty)، DataView)
تیره کردن xAxisLabels به عنوان لیست جدید (از رشته)
کم نور literalDataPointsList به عنوان فهرست جدید (از اعشار)
Dim maxValue به عنوان اعشاری = 0

"خواندن نقاط داده و ذخیره حداکثر مقدار
برای هر نقطه به عنوان DataRowView در dataPointsView
«حذف سنت از هر مقدار
literalDataPointsList.Add (Convert.ToDecimal (نقطه ("Total")))

"در حال بررسی برای حداکثر جدید
اگر literalDataPointsList (literalDataPointsList.Count - 1)> maxValue سپس
maxValue = literalDataPointsList (literalDataPointsList.Count - 1)
پایان اگر

اگر ddlChartSize.SelectedIndex<>0 OrElse literalDataPointsList.Count Mod 2 = 1 سپس
xAxisLabels.Add (DisplayMonthName (Convert.ToInt32 (نقطه ("MonthVal"))))
دیگر
xAxisLabels.Add (String.Empty)
پایان اگر
بعد

"محاسبه مقادیر نسبی نقاط داده
کم نور relativeDataPointValues ​​به عنوان لیست جدید (از رشته)
برای هر نقطه به صورت اعشاری در literalDataPointsList
Dim relativeValue به صورت اعشاری = (نقطه / maxValue * 100)
relativeDataPointValues.Add (relativeValue.ToString ("0.00"))
بعد

موارد زیر برچسب‌هایی برای محورهای X و Y هستند. محور Y از 0 تا حداکثر مقدار بازگردانده شده توسط پرس و جو متغیر است، در حالی که نقاط داده محور X از لیست xAxisLabels بارگیری می‌شوند. در نهایت، به ویژگی ImageUrl عنصر Image مقدار پیوند رندر شده (URL) اختصاص داده می شود.

"افزودن دو محور
chartUrl.Append ("& chxt = x, y")

"افزودن مقادیر برای محور y
chartUrl.AppendFormat ("& chxr = 1.0، (0)"، maxValue.ToString ("0"))

"افزودن برچسب برای X-Axis
chartUrl.AppendFormat ("& chxl = 0: / (0)"، String.Join ("/"، xAxisLabels.ToArray ()))

در نهایت باید نمودار زیر را ببینید. شکل اول فروش سال 1996 را در نمودار خطی نشان می دهد و دومی فروش سال 1997 را با استفاده از نمودار میله ای نشان می دهد.

نتیجه

Google Chart API یک راه سریع و آسان برای ایجاد انواع مختلف نمودارها برای وب سایت شما ارائه می دهد. برای ایجاد نمودار، باید از طریق URL به Google Chart API درخواست دهید، در حالی که ویژگی‌های نمودار (ابعاد، نقاط داده، رنگ‌ها، برچسب‌ها و غیره) را با استفاده از یک رشته جستجو ارسال می‌کنید. Chart API تصویری را برمی گرداند که می توانید در یک عنصر نمایش دهید ... با کمی کار می توانید چنین پیوند نموداری را مستقیماً از یک صفحه وب ASP.NET ایجاد کنید و همچنین نمودارهایی را بر اساس اطلاعات پایگاه داده ایجاد کنید. در این مقاله نحوه ایجاد پیوند به صورت دستی را بررسی کردیم و در مقاله بعدی به یک کنترل تخصصی که از binding داده های اعلامی و سایر ویژگی های مفید پشتیبانی می کند نگاه خواهیم کرد.

با ذخیره اطلاعات در یک پایگاه داده، در این مقاله نوبت به نمایش داده ها از همان پایگاه داده در آن می رسد به صورت گرافیکی... بله دوستان برای شروع نگاهی سطحی به فناوری های موجود خواهیم داشت. و با انتخاب یکی، آن را در وب سایت خود ادغام می کنیم.

بگذارید کمی به شما یادآوری کنم که فراموش کرده است که این بخشی از پروژه است. برنامه ریزی مقاله مروری قابل مشاهده است.
پس بیایید شروع کنیم. برای نمایش داده های مختلف از نمودارها و نمودارهای مختلفی استفاده می شود. بیایید به چند کتابخانه جاوا اسکریپت برای ایجاد تجسم سریع و کارآمد داده نگاه کنیم.

فهرستی از برخی از آنها:
- D3.js - کتابخانه جاوا اسکریپت با متن باز، برای پردازش و تجسم داده ها. گرافیک ها با استفاده از HTML، SVG و CSS تولید می شوند.
- ChartJS - متن بازپروژه از بوم HTML5 برای رندر استفاده می کند. همراه با مجموعه ای از نمودارهای اولیه "آماده".
- Chartlist.js - توسط SVG برای ارائه نمودارها / نمودارها استفاده می شود و همچنین از طریق پرس و جوهای رسانه CSS3 و Sass مدیریت و پیکربندی می شود.
- n3-charts - بر روی D3.js و AngularJS ساخته شده است. بسیاری از نمودارهای استاندارد را در قالب دستورالعمل های سفارشی AngularJS ارائه می دهد.
- EmberCharts منبع باز است که بر روی D3.js و Ember.js ساخته شده است. از SVG برای ارائه نمودارها استفاده می کند.
- نمودارهای اسموتی - برای کار با یک جریان داده در زمان واقعی. از عنصر بوم HTML5 برای ارائه نمودار استفاده می کند. یک کتابخانه جاوا اسکریپت خالص که چنین قابلیت های اختیاری را برای نمودارهای بلادرنگ فراهم می کند.
-Chartkick - کتابخانه جاوا اسکریپت برای رسم نمودارها / نمودارها در برنامه های Ruby. نمودارها از طریق SVG تولید می شوند.
-MeteorCharts - برای رندر کردن نمودارها، می توانید یکی از این فناوری ها را انتخاب کنید: HTML5 canvas، WebGL، SVG و حتی DOM.
-Flot - کتابخانه جاوا اسکریپت برای جی کوئری که به شما امکان ایجاد نمودارها / نمودارها را می دهد.

و همچنین بسیاری دیگر. من بر روی - کتابخانه جاوا اسکریپت، برای ایجاد سادهنمودار. بسیاری از نمودارهای از پیش ساخته شده را ارائه می دهد. بسیاری وجود دارد تنظیمات پیکربندی(Google Chart Tools API مجموعه ای از ابزارهای تجسم داده با ویژگی های غنی است.) ظاهرگرافیک گرافیک ها با استفاده از استخراج HTML5/SVG برای اطمینان از سازگاری بین مرورگرها و قابلیت حمل بین پلتفرم در iPhone، iPad و Android ارائه می شوند. همچنین حاوی VML برای پشتیبانی از نسخه های قدیمی تر IE است.

حالا بیایید به تمرین بپردازیم. نمودارهای گوگل اطلاعات و ابزارهایی را برای توسعه دهندگان فراهم می کند تا این فناوری را در منابع خود ادغام کنند https://developers.google.com/chart/

ما با نمودار خطی کار خواهیم کرد (شکل ج در سمت چپ). بیایید به مثال ارائه شده در ادامه برویم این سرویسلینک زیر https://developers.google.com/chart/interactive/docs/ gallery / linechart.هنگامی که نمودار خطی است که در مرورگر با استفاده از SVG یا VML ارائه می شود. هنگام نگه داشتن ماوس روی نقاط، نکات ابزار را نمایش می دهد. خوب، ما دوباره SVG را ملاقات کردیم ، هنگام ساخت یک تصویر تعاملی از کنترل کننده اکتساب داده. و نکات ابزار نیز عالی هستند.بیایید الگوی اسکریپت را در بالای نمودار نشان داده شده برداریم و آن را در صفحه خود بچسبانیم. بیایید فقط یک نمودار رسم کنیم. بیایید تغییراتی ایجاد کنیم بیایید تحلیل کنیم که کجا چیست و کجا. بنابراین کد در استودیو است.

زیر در شکل نتیجه استفاده از این اسکریپت:

لینک را دنبال کنید http: // ap -impulse.ru/interface.phpبه یک رابط وب تعاملی در سمت چپ نموداری بر اساس داده های ایستا وجود دارد.

در بالا، استفاده از کتابخانه نمودارهای Google را در منابع خود، کار با اسناد و کد را بررسی کردیم. این منبعدارای انتخاب گسترده ای از نمودارها و نمودارها و همچنین نمونه ای از کاربرد آنها و توضیحات کامل... همانطور که در بالا ذکر شد، ما از داده های استاتیک استفاده کردیم. برای پروژه خود، باید از پایگاه داده بخوانیم، که در مقاله گذشته نحوه وارد کردن داده ها از پارامترهای GET را یاد گرفتیم. در ادامه، اتصال به پایگاه داده، رسم و همچنین خطاهای رخ داده را بررسی خواهیم کرد. ما برای امروز در این مورد توقف خواهیم کرد. خداحافظ همه