نقش های ستونی

این صفحه مفهوم و استفاده از نقش ها را در جداول داده نمودار شرح می دهد.

  1. نقش ها چیست؟
  2. چه نقش هایی در دسترس است؟
  3. سلسله مراتب نقش و انجمن
  4. تعیین نقش

نقش ها چیست؟

اکنون اشیاء Google DataTable و DataView از نقش‌های ستونی که صریحاً اختصاص داده شده‌اند پشتیبانی می‌کنند. نقش ستون هدف داده‌ها را در آن ستون توصیف می‌کند: برای مثال، یک ستون ممکن است داده‌هایی را که متن راهنمای ابزار، حاشیه‌نویسی‌های نقطه داده یا نشانگرهای عدم قطعیت را توصیف می‌کند، در خود جای دهد. بیشتر نقش‌های ستون برای ستون «داده» قبل از آن اعمال می‌شود، خواه بلافاصله قبل از آن باشد یا قبل از اولین گروه از ستون‌های نقش متوالی. به عنوان مثال، می‌توانید دو ستون به دنبال ستون «داده» داشته باشید، یکی برای «نکات ابزار» و دیگری برای «حاشیه‌نویسی». اما به دنبال ستون "دامنه"، ما به طور کلی به نقش های ستون "annotation" و "annotationText" نیز اجازه می دهیم.

توجه: اگر به دنبال کنترل محتوای راهنمایی‌های ابزاری هستید که وقتی کاربر ماوس را روی نمودار می‌گذارد، ظاهر می‌شود، به نکات ابزار مراجعه کنید.

در ابتدا، تنها دو نقش برای یک ستون موجود بود: 'دامنه'، که مقادیر محور اصلی را مشخص می کند. و 'داده'، که ارتفاع میله، عرض برش پای، و غیره را مشخص می کند. این نقش ها بر اساس ترتیب و نوع ستون ها در جدول به طور ضمنی تخصیص داده شدند. با این حال، با توانایی اختصاص دادن صریح نقش ستون‌ها، اکنون می‌توانید ستون‌های اختیاری که ویژگی‌های جدید و جالبی را به نمودار ارائه می‌دهند، مانند برچسب‌های حاشیه‌نویسی دلخواه، متن شناور و نوارهای عدم قطعیت اضافه کنید.

اگر به صراحت نقش ستونی را اختصاص ندهید، نقش آن با ترتیب ستون در جدول، طبق مشخصات قالب داده نمودار استنتاج می شود. این صفحه به شما نشان می‌دهد که چه نقش‌هایی برای اختصاص صریح به شما در دسترس است و چگونه آنها را اختصاص دهید.

در اینجا مقایسه ای از آنچه می توانید با یک نمودار خطی با استفاده از نقش های پیش فرض و استنباط شده در مقایسه با نقش های اضافی و مشخصاً اختصاص داده شده انجام دهید، آورده شده است.

فرمت جدول داده نمودار خطی :

ستون 0 ستون 1 ... ستون N
هدف مقادیر خط 1 ... مقادیر خط N
نوع داده عدد ... عدد
نقش دامنه داده ها ... داده ها
اختیاری پشتیبانی می شود
نقش های ستونی
  • حاشیه نویسی
  • annotationText
  • حاشیه نویسی
  • annotationText
  • یقین - اطمینان - قطعیت
  • تاکید
  • فاصله
  • محدوده
  • سبک
  • راهنمای ابزار
 ...
  • حاشیه نویسی
  • annotationText
  • یقین - اطمینان - قطعیت
  • تاکید
  • فاصله
  • محدوده
  • سبک
  • راهنمای ابزار

نمودار بدون نقش ستون صریح نمودار با نقش های ستون صریح

این نمودار نقش‌ها را به‌صراحت اعمال نمی‌کند، و بنابراین فقط می‌تواند از داده‌های اصلی و طرح‌بندی ستون دامنه نشان داده شده در بالا استفاده کند.

جدول داده ها:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
  ['April',1000],
  ['May',  1170],
  ['June',  660],
  ['July', 1030]
]);

این نمودار نقش ها را به صراحت اختصاص می دهد و بنابراین می توان ستون های اختیاری را اضافه کرد. این نمودار دارای ستون های اختیاری برای حاشیه نویسی، annotationText، فاصله و نقش های قطعی است.

  • ستون های حاشیه نویسی برچسب های ثابت را در نمودار مشخص می کنند. در اینجا، 'A'، 'B'، 'C' حاشیه نویسی هستند.
  • ستون‌های annotationText زمانی که ماوس را بر روی حاشیه‌نویسی ( نه نقطه داده) قرار می‌دهید، متن شناور را مشخص می‌کنند.
  • ستون های فاصله ای، نقاط بالا و پایین میله های I را در نمودار مشخص می کنند. سه نوار I در نمودار وجود دارد.
  • ستون های قطعیت نشان می دهد که آیا داده ها در آن نقطه قطعی هستند یا خیر. آخرین نقطه داده نامشخص است و بنابراین خط منتهی به آن شکسته می شود.

جدول داده ها:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'number', role:'interval'});  // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['April',1000,  900, 1100,  'A','Stolen data', true],
    ['May',  1170, 1000, 1200,  'B','Coffee spill', true],
    ['June',  660,  550,  800,  'C','Wumpus attack', true],
    ['July', 1030, null, null, null, null, false]
]);

چه نقش هایی در دسترس است؟

جدول زیر تمام نقش های پشتیبانی شده توسط نمودارهای گوگل را فهرست می کند. همه نقش ها توسط همه انواع نمودار پشتیبانی نمی شوند. اسناد هر نمودار توضیح می دهد که کدام نقش ها در دسترس هستند و به کجا می روند. نقش‌ها برای انواع نمودار متفاوت ارائه می‌شوند.

نقش شرح مثال
حاشیه نویسی

متن برای نمایش در نمودار نزدیک نقطه داده مرتبط. متن بدون هیچ گونه تعامل کاربر نمایش داده می شود. حاشیه نویسی و متن حاشیه نویسی را می توان هم به نقاط داده و هم به دسته ها (برچسب های محور) اختصاص داد.

دو سبک حاشیه‌نویسی وجود دارد: نقطه ( پیش‌فرض )، که متن حاشیه‌نویسی را نزدیک نقطه مشخص شده می‌کشد، و خطی که متن حاشیه‌نویسی را روی خطی ترسیم می‌کند که ناحیه نمودار را به دو نیم می‌کند. شما می توانید سبک خط را با تنظیم این گزینه نمودار مشخص کنید: annotations: {' column_id ': {style: 'line'}}

نوع داده: رشته

پیش فرض: رشته خالی

داده ها:

برچسب : «سال»، «فروش»، پوچ، پوچ، «هزینه‌ها»، پوچ، نقش تهی: دامنه، داده، حاشیه‌نویسی، متن حاشیه‌نویسی، داده، حاشیه‌نویسی، حاشیه‌نویسی متن «2004»، 1000، پوچ، پوچ، 400، پوچ، null '2005'، 1170، null، null، 460، 'A'، 'توسعه مدل جدید' '2006'، 660، 'B'، 'مدل جدید راه اندازی شد'، 1120، null، null '2007'، 1030، null , null , 540 , null , null

"A" و "B" در این نمودار حاشیه نویسی هستند. برای دیدن متن حاشیه‌نویسی، نشانگر را روی یادداشت ببرید. توجه داشته باشید که برای نمایش مقدار annotationText، باید ماوس را روی حاشیه‌نویسی نگه دارید، نه روی نقطه داده‌ای که روی آن اعمال می‌شود.

مقادیر تهی برای سلول های annotation و annotationText پذیرفته می شوند. با این حال، اگر یک مقدار annotationText دارید، باید یک مقدار annotation مرتبط داشته باشید.

annotationText

متن گسترده برای نمایش زمانی که کاربر روی حاشیه‌نویسی مرتبط قرار می‌گیرد. حاشیه نویسی و متن حاشیه نویسی را می توان هم به نقاط داده و هم به دسته ها (برچسب های محور) اختصاص داد. اگر یک ستون annotationText دارید، باید یک ستون حاشیه نویسی نیز داشته باشید. در مقابل، متن راهنمای ابزار زمانی نمایش داده می‌شود که کاربر روی نقطه داده مرتبط در نمودار قرار می‌گیرد.

نوع داده: رشته

پیش فرض: رشته خالی

یقین - اطمینان - قطعیت

نشان می دهد که آیا یک نقطه داده قطعی است یا خیر. نحوه نمایش آن به نوع نمودار بستگی دارد - برای مثال، ممکن است با خطوط چین یا پر کردن راه راه نشان داده شود.

برای نمودارهای خط و مساحت، بخش بین دو نقطه داده مشخص است اگر و تنها در صورتی که هر دو نقطه داده مشخص باشند.

نوع داده: بولی ، جایی که درست است، نادرست نامشخص است.

پیش فرض: درست است

تاکید

بر نقاط داده نمودار مشخص شده تأکید دارد. به صورت یک خط ضخیم و/یا نقطه بزرگ نمایش داده می شود.

برای نمودارهای خطی و مساحتی، بخش بین دو نقطه داده تاکید می شود اگر و تنها در صورتی که بر هر دو نقطه داده تاکید شود.

نوع داده: بولی

پیش فرض: نادرست

داده ها:

label: 'Year',  'Sales',     null, 'Expenses',     null
 role: domain,   data,   emphasis,     data,   emphasis
       '2004',   1000,       true,      400,      false
       '2005',   1170,       true,      460,       true
       '2006',    660,      false,     1120,       true
       '2007',   1030,      false,      540,       true

در این نمودار، سری «فروش» دارای یک بخش تأکید شده است که با ستون سه، ردیف های یک و دو مشخص شده است. سری «هزینه‌ها» دارای دو بخش برجسته است که توسط ستون پنجم، ردیف‌های دو، سه و چهار مشخص شده‌اند. توجه داشته باشید که چگونه تاکید نیاز به تاکید بر هر دو نقطه مرزی دارد.

فاصله

محدوده داده بالقوه را برای یک نقطه خاص نشان می دهد. فواصل زمانی معمولاً به عنوان نشانگرهای محدوده سبک I-bar نمایش داده می شوند. ستون های فاصله، ستون های عددی هستند. ستون های فاصله ای را به صورت جفت اضافه کنید و مقدار پایین و بالای نوار را مشخص کنید. مقادیر فاصله باید با افزایش ارزش، از چپ به راست اضافه شوند.

نوع داده: شماره

پیش فرض: بدون فاصله

داده ها:

label: 'Day',  'Stock value',   null,     null
 role: domain,     data,    interval, interval
        'Mon',       38,          20,       45
        'Tue',       55,          31,       66
        'Wed',       77,          50,       80
      'Thurs',       66,          50,       77

در این نمودار، مقادیر بازه، یک نوار I را در اطراف نقاط تعریف می کنند. مقادیر از چپ به راست افزایش می یابد. بالاترین و کمترین فواصل در اطراف یک نقطه، بالا و پایین میله را مشخص می کنند.

توجه: برای تمام جزئیات مربوط به فواصل، فاصله ها را ببینید.

محدوده

نشان می دهد که یک نقطه در محدوده یا خارج از محدوده است. اگر نکته ای خارج از محدوده باشد، از نظر بصری تاکید نمی شود.

برای نمودارهای خط و مساحت، اگر هر یک از نقاط پایانی در محدوده باشد، بخش بین دو نقطه داده در محدوده است.

نوع داده: بولی ، که در آن true به معنای دامنه است.

پیش فرض: درست است

داده ها:

label: 'Year',   'Sales',    null,    'Expenses',      null
 role: domain,     data,    scope,        data,       scope
        '2004',    1000,    false,         400,        true
        '2005',    1170,    false,         460,       false
        '2006',     660,     true,        1120,       false
        '2007',    1030,     true,         540,       false

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

سبک

ویژگی های خاصی از جنبه های مختلف داده های شما را سبک می کند. آن ارزش ها عبارتند از:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

نوع داده: رشته ، که در آن می توان چندین سبک را با استفاده از یک 'firstProperty: value; secondProperty: value' ، یا با مشخص کردن نوع و قرار دادن ویژگی‌های سبک در داخل پرانتزهای فرفری، سبک‌های خاصی را برای bar, line, و point تنظیم کنید (مثلاً bar { //properties go here } ).

پیش فرض: null

داده ها:

label: 'Character', 'Popularity',   'Style',
role:  domain,      data,   style,
'Hulk',             50,    'color: green',
'Captain America',  75,    'color: #0000cf;' +
                           'stroke-color: #cf001d',
'Wolverine',        90,    'opacity: 0.5;' +
                           'stroke-width: 5;' +
                           'stroke-color: #01a0ff;' +
                           'fill-color: #fff600',
'Iron Man',         60,    'color: #db9500;' +
                           'stroke-width: 10;' +
                           'stroke-color: #a30300',
'Spider Man',       100,   'bar {' +
                           'fill-color: #c8001d;' +
                           'stroke-width: 3;' +
                           'stroke-color: #1800c8}'

در این نمودار، هر نوار مستقل از بقیه با استفاده از نقش ستون style بندی شده است. سبک ها را می توان به طور خاص برای نقطه، خط یا نوار تنظیم کرد (به ردیف مرد عنکبوتی مراجعه کنید)، یا به طور کلی، که بسته به نوع نمودار، سبک ها را برای همه نقاط، خطوط و میله ها اعمال می کند.

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

راهنمای ابزار

زمانی که کاربر روی نقطه داده مرتبط با این ردیف قرار می گیرد، متنی نمایش داده می شود.

توجه: این توسط تجسم نمودار حباب پشتیبانی نمی شود. محتوای نکات ابزار Bubble Chart HTML قابل تنظیم نیست.

نوع داده: رشته

پیش فرض: مقدار نقطه داده

داده ها:

label: 'Year',   'Sales',    null,   'Expenses',    null
 role: domain,     data,    tooltip,    data,      tooltip
        '2004',    1000, '1M$ sales,     400,    '$0.4M expenses
                           in 2004'                  in 2004'
        '2005',    1170, '1.17M$ sales,  460,    '$0.46M expenses
                            in 2005'                  in 2005'
        '2006',     660, '.66$ sales,   1120,     '$1.12M expenses
                            in 2006'                 in 2006'
        '2007',    1030, '1.03M$ sales,  540,    '$0.54M expenses
                            in 2007'                  in 2007'

ماوس را روی نقاط داده نگه دارید تا متن راهنمای ابزار نمایش داده شود. داده های راهنمای ابزار به تمام نقاط در هر دو خط، در ستون های 3 و 5 اختصاص داده می شود.

توجه: برای جزئیات بیشتر در مورد سفارشی کردن راهنمای ابزار، به راهنمای ابزار مراجعه کنید.

دامنه

شما نباید به طور واضح این نقش را اختصاص دهید، مگر اینکه یک نمودار چند دامنه طراحی کنید (در اینجا نشان داده شده است). قالب اصلی جدول داده ها، موتور نمودار را قادر می سازد استنباط کند که کدام ستون ها ستون های دامنه هستند. با این حال، باید بدانید کدام ستون ها ستون های دامنه هستند تا بدانید کدام ستون های دیگر می توانند آن را تغییر دهند.

ستون های دامنه برچسب ها را در امتداد محور اصلی نمودار مشخص می کنند. ستون های دامنه های متعدد گاهی اوقات می توانند برای پشتیبانی از چندین مقیاس در یک نمودار استفاده شوند.

نوع داده: معمولاً رشته ای ، اما گاهی اوقات شماره یا تاریخ

داده ها: 

label: '2009,  '2009,     '2009,   '2008,    '2008    '2008
      Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role:  domain,   data,       data,   domain,   data,     data
      'Q1/09',   1000,        400,  'Q1/08',    800,      300
      'Q2/09',   1170,        460,  'Q2/08',    750,      400
      'Q3/09',    660,       1120,  'Q3/08',    700,      540
      'Q4/09',   1030,        540,  'Q4/08',    820,      620

این مثال نمودار چند دامنه ای را نشان می دهد. دو ستون داده اول دامنه اول ("ربع 2009") و دو ستون داده آخر دامنه دوم ("ربع 2008") را تغییر می دهند. هر دو حوزه بر روی یک مقیاس محور قرار گرفته اند.

داده ها

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

ستون های نقش داده، داده های سری را برای ارائه در نمودار مشخص می کنند. برای اکثر نمودارها، یک ستون = یک سری، اما این می تواند بسته به نوع نمودار متفاوت باشد (برای مثال، نمودارهای پراکنده به دو ستون داده برای سری اول و یک ستون اضافی برای هر سری اضافی نیاز دارند؛ نمودارهای کندل استیک به چهار ستون داده برای هر سری نیاز دارند. ).

نوع داده: شماره

سلسله مراتب نقش و انجمن

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

بنابراین، برای مثال، یک ستون scope به نزدیکترین ستون داده در سمت چپ آن اعمال می شود. یک ستون annotationText به نزدیکترین ستون حاشیه نویسی سمت چپ اعمال می شود. یک حاشیه نویسی به نزدیکترین ستون داده یا دامنه در سمت چپ آن اعمال می شود.

تعیین نقش

نقش ها به عنوان ویژگی ستون در یک شی DataTable اختصاص داده می شوند. راه های مختلفی برای ایجاد یک ستون نقش وجود دارد، اما در اینجا رایج ترین آنها وجود دارد:

دو تکنیک اول نمودار زیر را ترسیم می کنند:

روش DataTable.addColumn

مثال زیر یک نمودار میله ای با یک نشانگر فاصله در سه میله ایجاد می کند. نشانگرهای فاصله توسط ستون سوم و چهارم با استفاده از روش DataTable.addColumn() مشخص می شوند.

       var data = new google.visualization.DataTable();
       data.addColumn('string', 'Month'); // Implicit domain column.
       data.addColumn('number', 'Sales'); // Implicit data column.
       data.addColumn({type:'number', role:'interval'});
       data.addColumn({type:'number', role:'interval'});
       data.addColumn('number', 'Expenses');
       data.addRows([
         ['April',1000,  900, 1100,   400],
         ['May',  1170, 1000, 1200,   460],
         ['June',  660,  550,  800,  1120],
         ['July', 1030,    ,     ,    540]
       ]);

       var chart = new google.visualization.BarChart(
                document.getElementById('visualization'));
       chart.draw(data,
          {width: 800, height: 600, title: 'Company Performance'});

علامت گذاری تحت اللفظی جاوا اسکریپت

در JSON literal، باید یک ویژگی p ستون را با مقدار "role":"role-type" مشخص کنید. مثال زیر نحوه تعیین نقش ها را با استفاده از نمادهای تحت اللفظی جاوا اسکریپت نشان می دهد. این کار فقط در زمان ایجاد جدول قابل انجام است.

{"cols":[
  {"id":"","label":"Month","pattern":"","type":"string"},
  {"id":"","label":"Sales","pattern":"","type":"number"},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
  {"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
  {"c":[
    {"v":"April","f":null},
    {"v":1000,"f":null},
    {"v":900,"f":null},
    {"v":1100,"f":null},
    {"v":400,"f":null}]},
  {"c":[
    {"v":"May","f":null},
    {"v":1170,"f":null},
    {"v":1000,"f":null},
    {"v":1200,"f":null},
    {"v":460,"f":null}]},
  {"c":[{"v":"June","f":null},
    {"v":660,"f":null},
    {"v":550,"f":null},
    {"v":800,"f":null},
    {"v":1120,"f":null}]},
  {"c":[
    {"v":"July","f":null},
    {"v":1030,"f":null},
    {"v":null,"f":null},
    {"v":null,"f":null},
    {"v":540,"f":null}]}],
"p":null
}

روش DataView.setColumns

هنگام ایجاد نما، می توانید به صراحت نقش یک ستون را تعیین کنید. این هنگام ایجاد یک ستون محاسبه شده جدید مفید است. برای اطلاعات بیشتر به DataView.setColumns() مراجعه کنید.