نمودار چارتیست
میله های همپوشانی در تلفن همراه
این مثال از interpolation برچسب و ویژگی seriesBarDistance استفاده می کند که به شما امکان می دهد میله ها روی یکدیگر همپوشانی داشته باشند./p>
نمودار میله ای Stacked
همچنین می توانید نمودار میله ای خود را طوری تنظیم کنید که میله های سری را به راحتی روی هم قرار دهید و از ویژگی stackBars در پیکربندی خود استفاده کنید.
متحرک سازی یک دونات با Svg.animate
اگرچه دستیابی به این انیمیشن با CSS با برخی موارد غیربهینه به صورت جزئی نیز امکان پذیر است ، در اینجا مثالی از نحوه متحرک سازی نمودارهای دونات با استفاده از Chartist.Svg.animate و SMIL آورده شده است.
نمودار پای ساده
یک نمودار دایره ای بسیار ساده با interpolation برچسب برای نشان دادن درصد به جای مقدار سری واقعی داده ها.
انیمیشن های پیشرفته Smil
Chartist یک API ساده برای متحرک سازی عناصر موجود در نمودار با استفاده از SMIL ارائه می دهد.
نمودار خطی ساده
نمونه ای از یک نمودار خطی ساده با سه سری. می توانید این مثال را در زمان واقعی ویرایش کنید.
نمودار پراکندگی خط
این مثال پیشرفته برای ترسیم نمودار پراکندگی از نمودار خطی استفاده می کند. شی داده با یک مکانیزم تصادفی به سبک عملکردی ایجاد می شود.
نمودار خطی با مساحت
در این نمودار از گزینه showArea برای ترسیم خط ، نقطه بلکه شکل منطقه استفاده شده است. از گزینه low برای تعیین یک کران پایین ثابت استفاده کنید که باعث گسترش منطقه شود.