نمودار. js

Chart. JS یک کتابخانه JavaScript رایگان برای ساخت نمودارهای مبتنی بر HTML است. این یکی از ساده ترین کتابخانه های تجسم برای JavaScript است و انواع نمودار داخلی زیر را ارائه می دهد:

• طرح پراکنده
• نمودار خط
• نمودار میله ای
• نمودار دایره ای
• نمودار پیراشکی
• نمودار حباب
• نمودار منطقه
• نمودار رادار
• نمودار مخلوط

چگونه از Chart. js استفاده کنیم؟

Chart. js استفاده آسان است.

ابتدا پیوندی را به ارائه CDN (شبکه تحویل محتوا) اضافه کنید:

سپس ، A را به جایی که می خواهید نمودار بکشید اضافه کنید:

عنصر بوم باید دارای یک شناسه منحصر به فرد باشد.

نحو نمودار پراکندگی معمولی:

const mychart = نمودار جدید ("MyChart" ،، گزینه ها:<>>);نحو نمودار خط معمولی: const mychart = نمودار جدید ("MyChart" ،، گزینه ها:<>>);نحو نمودار نوار معمولی: const mychart = نمودار جدید ("MyChart" ،، گزینه ها:<>>);توطئه های پراکندگی

قیمت خانه در مقابل اندازه

رمز منبع

new Chart("myChart", type: "scatter", data: datasets: [ pointRadius: 4, pointBackgroundColor: "rgba(0,0,255,1)", data: xyValues>]>، گزینه ها:<.>>);

نمودارهای خط

قیمت خانه در مقابل اندازه

رمز منبع

const xvalues = [50،60،70،80،90،100،110،120،130،140،150] ؛const yvalues = [7،8،8،9،9،9،10،11،14،14،15] ؛

new Chart("myChart", type: "line", data: labels: xValues, datasets: [ backgroundColor:"rgba(0,0,255,1.0)", borderColor: "rgba(0,0,255,0.1)", data: yValues>]>، گزینه ها:<.>>);

اگر BorderColor را روی صفر تنظیم کردید ، می توانید نمودار خط را پراکنده کنید:

Bordercolor: "RGBA (0،0،0،0)" ،

چند خط

رمز منبع

const xvalues = [100،200،300،400،500،600،700،800،900،1000] ؛

new Chart("myChart", type: "line", data: labels: xValues, datasets: [ data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478], borderColor: "red", fill: false>, data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000], borderColor: "green", fill: false>, data: [300,700,2000,5000,6000,4000,2000,1000,200,100], borderColor: "blue", fill: false>]>, options: legend:>>);

نمودارهای خطی

رمز منبع

const xvalues = [] ؛const yvalues = [] ؛تولید شده ("x * 2 + 7" ، 0 ، 10 ، 0. 5) ؛

new Chart("myChart", type: "line", data: labels: xValues, datasets: [ fill: false, pointRadius: 1, borderColor: "rgba(255,0,0,0.5)", data: yValues>]>، گزینه ها:<.>>);

تابع تولید شده (مقدار ، i1 ، i2 ، مرحله = 1) برای (اجازه دهید x = i1 ؛ x

نمودارهای تابعی

همان نمودار خطی. فقط پارامتر (های) تولید شده را تغییر دهید:

تولید شده ("Math. Sin (x)" ، 0 ، 10 ، 0. 5) ؛

نمودار میله

رمز منبع

var xvalues = ["ایتالیا" ، "فرانسه" ، "اسپانیا" ، "ایالات متحده" ، "آرژانتین"] ؛var yvalues = [55 ، 49 ، 44 ، 24 ، 15] ؛var barcolors = ["قرمز" ، "سبز" ، "آبی" ، "نارنجی" ، "قهوه ای"] ؛

new Chart("myChart", type: "bar", data: labels: xValues, datasets: [ backgroundColor: barColors, data: yValues>]>، گزینه ها:<.>>);