Highcharts Orbit یک نوار ابزار تجزیه و تحلیل را به نمودارهای Highcharts شما اضافه می کند. از نوار ابزار، کاربران شما می‌توانند آمار خلاصه را مشاهده کنند، یک خط روند را متناسب کنند، یک سری را پیش‌بینی کنند، ناهنجاری‌ها را شناسایی کنند، داده‌ها را فیلتر کنند، حاشیه‌نویسی کنند و نتیجه را صادر کنند. تجزیه و تحلیل در مرورگر اجرا می شود و کد نمودار شما همانطور که هست باقی می ماند.
این آموزش از راهنمای شروع (نیاز به ورود به حساب Orbit) در پورتال Orbit پیروی می کند: ماژول را بارگیری کنید، Orbit را روی نمودار فعال کنید و صفحه را باز کنید. تنها چیزی که نیاز دارید یک صفحه HTML است.
آنچه شما نیاز دارید
- کلید استقرار مدار. به پورتال Orbit وارد شوید، Deployments را باز کنید و یک استقرار را انتخاب کنید. بخش embed یک تگ اسکریپت را با کلید شما در آن نشان می دهد. کلید با شروع می شود
orb_. - نمودارهای برتر Orbit به Highcharts متصل می شود، اما آن را شامل نمی شود. Highcharts و Orbit محصولات جداگانه با مجوزهای جداگانه هستند.
مرحله 1: Highcharts و Orbit را بارگیری کنید
ایجاد کنید index.html فایل و اسکریپت ها را به آن اضافه کنید . Replace YOUR_API_KEY با کلید استقرار شما:
سفارش مهم است Orbit هنگام بارگیری به Highcharts متصل می شود، بنابراین همیشه بعد از Highcharts و هر ماژول Highcharts که استفاده می کنید می آید.
ماژول ها هر پشت نوار ابزار. ماژول صادرات به منوی صادرات و ماژول حاشیه نویسی ابزارهای حاشیه نویسی را نیرو می دهد. highcharts-more نوع سری محدوده مساحتی را اضافه می کند که Orbit برای محدوده اطمینان پیش بینی استفاده می کند. ماژول دسترس‌پذیری باعث می‌شود نمودار با صفحه‌خوان‌ها و پیمایش صفحه‌کلید کار کند.
Orbit در code.highcharts.com یا npm نیست. هر استقرار ماژول خود را از میزبان Orbit با کلید در URL ارائه می دهد. دسترسی به ابزار، محدودیت‌ها و سایت‌ها در پورتال فعال هستند و دفعه بعد که صفحه بارگیری می‌شود، تغییرات در آنجا اعمال می‌شوند.
مرحله 2: نمودار را ایجاد کنید
ظرف را اضافه کنید :
Then add the chart in a برچسب زیر آن این مدل از مثال درآمد ماهانه در راهنمای شروع، با دو سال داده برای دو کانال فروش، مدلسازی شده است تا ابزارهای تجزیه و تحلیل چیزی برای کار کردن داشته باشند.
Highcharts.chart('chart', {
orbit: { enabled: true },
title: { text: 'Monthly Revenue' },
xAxis: {
categories: [
'Oct 2024', 'Nov 2024', 'Dec 2024', 'Jan 2025', 'Feb 2025', 'Mar 2025',
'Apr 2025', 'May 2025', 'Jun 2025', 'Jul 2025', 'Aug 2025', 'Sep 2025',
'Oct 2025', 'Nov 2025', 'Dec 2025', 'Jan 2026', 'Feb 2026', 'Mar 2026',
'Apr 2026', 'May 2026', 'Jun 2026', 'Jul 2026', 'Aug 2026', 'Sep 2026'
]
},
yAxis: { title: { text: 'Revenue (USD)' } },
series: [{
name: 'Online',
data: [
41800, 45600, 45000, 44900, 48600, 47500, 49000, 53500,
56400, 56300, 55300, 58600, 58500, 59200, 62700, 64600,
66000, 67300, 71500, 72200, 71100, 72400, 76300, 78200
]
}, {
name: 'In-store',
data: [
61200, 60600, 60700, 60100, 61000, 58700, 60400, 57100,
60500, 58800, 56100, 55900, 56400, 57000, 58200, 57100,
56800, 55000, 57600, 56100, 53900, 53000, 54000, 53600
]
}]
});
orbit: { enabled: true } تنها گزینه Orbit است که شما نیاز دارید. هر چیز دیگری یک پیکربندی ساده Highcharts است.
مرحله 3: صفحه را باز کنید
برای مثال با راهاندازی، صفحه را از یک وب سرور محلی ارائه دهید npx serve در پوشه پروژه و URL چاپ شده را باز کنید. Orbit فقط در سایت های فهرست شده در استقرار شما بارگیری می شود، بنابراین از یک استقرار تنظیم شده برای آزمایش محلی استفاده کنید (به «افزودن سایت خود» در زیر مراجعه کنید).
نمودار با نوار ابزار Orbit در بالای آن ارائه می شود. ابزارها در منوها گروه بندی می شوند:
- بررسی کنید بین نمودار و سایر نمایشهای دادههای مشابه سوئیچ کنید: جدول آمار خلاصه، هیستوگرام توزیع و کاشیهای KPI. حالت تمام صفحه نیز وجود دارد.
- تحلیل کنید آمارها را ذخیره می کند: همبستگی ها و مشارکت ها، خطوط روند و پیش بینی ها، تشخیص ناهنجاری و محدودیت های کنترل.
- حاشیه نویسی کنید شکل ها، خطوط و برچسب ها را روی نمودار ترسیم می کند.
- تبدیل کنید داده ها را فیلتر می کند و سری های مشتق شده مانند یک کل یا یک نسبت را محاسبه می کند.
- به اشتراک بگذارید پیوندی ایجاد می کند که تغییرات کاربر را مجدداً اعمال می کند و صادرات نمودار را به عنوان تصویر یا داده دانلود می کند.
آن را امتحان کنید تحلیل کنید، سپس روندها، سپس خط روند. Orbit روی هر سری یک خط مستقیم قرار می دهد و آن را به صورت خط چین بر روی نمودار ترسیم می کند. این پانل نشان میدهد که هر روند چقدر بالاتر از محدوده و R² افزایش یا کاهش مییابد، که به شما میگوید چقدر خط با داده‌ها مطابقت دارد (1 یک تناسب کامل است). در اینجا، درآمد آنلاین در طول دو سال حدود 35000 دلار افزایش یافته است و درآمد فروشگاهی حدود 7000 دلار کاهش یافته است.
سایت خود را اضافه کنید
کلید در کد منبع صفحه شما قرار دارد که هر کسی می تواند آن را بخواند. این به خودی خود یک راز نیست. آنچه از آن محافظت می کند اجرای آن است سایت ها لیست در پورتال Orbit فقط در سایتهای فهرستشده در آنجا بارگیری می‌شود، و استقرار بدون سایت در هیچ کجا کار نمیکند.
استقرار خود را در پورتال باز کنید و هر دامنهای را که صفحات شما در آن اجرا می‌شوند، در بخش Sites اضافه کنید، برای مثال app.example.com. یک سایت دامنه و www آن را پوشش می دهد. نسخه دامنه خالی را وارد کنید. طرح و پورت نادیده گرفته می شوند.
تست محلی کمی متفاوت عمل می کند. localhost، 127.0.0.1 و [::1] به عنوان یک سایت محلی رایگان در هر پورت به حساب می آید. یک پیاده سازی یا محلی است یا عمومی، هرگز هر دو، بنابراین یک پیاده سازی جداگانه برای آزمایش محلی ایجاد کنید و از کلید آن در صفحات محلی خود استفاده کنید.
اگر کلیدی به جایی برسد که شما نمیخواهید، یک مدیر سازمان میتواند انتخاب کند کلید چرخان در صفحه استقرار کلید قدیمی در درخواست بعدی کار نمی کند و شما تگ اسکریپت جدید را در صفحات خود قرار می دهید. راهنمای شروع به جزئیات سایت ها، چرخش کلید و محدودیت های سرعت را پوشش می دهد.
استفاده از پکیج؟
Orbit در حال جستجو است window.Highcharts هنگام بارگیری اگر Highcharts را از npm نصب می کنید، آن را در معرض پنجره قرار دهید و قبل از ایجاد نمودار، اسکریپت Orbit را بارگیری کنید. دفترچه راهنمای React مدل کامل را با پوشش رسمی @highcharts/react نشان میدهد.
آن را مال خودت کن
حالا مثال را با یکی از نمودارهای خود جایگزین کنید. اضافه کنید orbit: { enabled: true } به پیکربندی آن بروید و بقیه را همانطور که هست رها کنید. قالبها، کنترلکنندههای کلیک و سایر عملکردهایی که تنظیم کردهاید همچنان روی رندر گرافیکی Orbit کار میکنند.
بهطور پیشفرض، نمودار هر ابزاری را که استقرار شما شامل می‌شود و با نمودار مطابقت دارد، دریافت میکند. برای نشان دادن تنها ابزارهایی که برای مورد استفاده شما منطقی هستند، آنها را در فهرست فهرست کنید tools:
orbit: {
enabled: true,
tools: ['summary', 'trendline', 'forecast', 'export']
}
کیت menuVisibility: 'compact' برای جمع کردن نوار ابزار پشت یک دکمه کوچک تا زمانی که کاربر آن را باز کند. راهنمای تنظیمات پیشرفته هر ابزار و گزینه را فهرست می کند.
مراحل بعدی
یک اسکریپت و یک گزینه به نمودار شما نوار ابزار تحلیل خود را می دهد. از اینجا، شما تصمیم می گیرید که کاربران شما چه ابزارهایی را ببینند و چگونه نمودارهای صفحه با هم کار کنند.
پست های مرتبط
