تجسم: نمودار تصویر عمومی

مهم: بخش نمودارهای تصویری ابزار نمودار Google از 20 آوریل 2012 رسماً منسوخ شده است. طبق خط مشی منسوخ شدن ما به کار خود ادامه خواهد داد.

  1. بررسی اجمالی
  2. مثال ها
  3. بارگذاری
  4. فرمت داده ها
  5. گزینه های پیکربندی
  6. مواد و روش ها
  7. مناسبت ها
  8. سیاست داده
  9. بومی سازی

بررسی اجمالی

نمودار تصویر عمومی یک بسته بندی عمومی برای همه نمودارهای تولید شده توسط Google Chart API است. لطفاً قبل از استفاده از این تجسم، اسناد نمودار API را بخوانید. توجه داشته باشید که برخلاف محدودیت 2K در تماس‌های مستقیم با Chart API، می‌توانید تا 16K داده را با استفاده از این تصویرسازی ارسال کنید.

تمام داده ها با استفاده از DataTable یا DataView به نمودارها منتقل می شوند. علاوه بر این، برخی از برچسب ها به عنوان ستون در جدول داده ارسال می شوند.

تمام پارامترهای دیگر نمودار URL API (به جز chd ) به عنوان گزینه ارسال می شوند.

توسط: گوگل

مثال ها

در اینجا نمونه هایی از انواع مختلف نمودار آورده شده است.

نمودار خطی 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

نمودار میله ای عمودی

توجه داشته باشید که در نمودارهای میله ای پیچیده، لازم نیست همانطور که خودتان نمودار را فراخوانی می کنید، chxt='x' را مشخص کنید. اگر یک محور را مشخص نکنید، نمودار تصویر عمومی سعی می کند نمودار را به طور پیش فرض به درستی تنظیم کند. 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

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

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

نمودار رادار 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

نمودار نقشه 

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

بارگذاری

نام بسته google.charts.load 'imagechart' است

  google.charts.load('current', {'packages': ['imagechart']});

نام کلاس تجسم google.visualization. ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

فرمت داده ها

دو قالب داده کلی وجود دارد: یکی برای نمودارهای نقشه و دیگری برای همه نمودارهای دیگر. توجه داشته باشید که تنها فرمت عددی پشتیبانی شده برای داده ها نوع شماره جاوا اسکریپت است.

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

نمودارهای نقشه

نمودار نقشه یک جدول داده با دو ستون مورد نیاز را می گیرد:

برای اطلاعات بیشتر به اسناد نمودار نقشه مراجعه کنید.

نمودارهای غیر نقشه

نمودارهای غیرنقشه ای یک جدول داده را با دو ستون اختیاری (یکی در ابتدا، یکی در انتها) و یک یا چند ستون داده در بین آنها می گیرند:

  • ستون اول - [ اختیاری، رشته ] هر ورودی نشان دهنده برچسبی است که در محور X (معادل پارامتر chl یا chxl ) برای نمودارهایی که از آن پشتیبانی می کنند استفاده می شود.
  • ستون های بعدی - هر تعداد ستون عددی که هر کدام نشان دهنده یک سری داده است.
  • آخرین ستون - [ اختیاری، رشته ] هر تعداد ستون رشته بعد از ستون های داده، جایی که هر ورودی نشان دهنده یک برچسب نقطه داده برای نمودارهایی است که از آن پشتیبانی می کنند. اگر می خواهید از این ستون استفاده کنید، باید گزینه annotationColumns را مشخص کنید.

بسته به نوع نمودار، داده ها به روش های مختلفی نمایش داده می شوند. مستندات نمودار خود را ببینید.

نکته ای در مورد نمایه های ستون: تجسم نمودار تصویر عمومی، ستون های رشته ای را از جدول داده ها قبل از ارسال جدول به سرویس Chart API حذف می کند. بنابراین، نمایه‌های ستون در گزینه‌ها، روش‌ها و رویدادهای تعریف‌شده در این صفحه شامل ستون‌های رشته‌ای در شمارش فهرست هستند. اما نمایه های ستون در هر گزینه ای که توسط سرویس Chart API مدیریت می شود (به عنوان مثال، گزینه chm ) ستون های رشته ای را در شمارش فهرست نادیده می گیرند.

گزینه های پیکربندی

گزینه های زیر برای این تجسم تعریف شده است. آنها را در شی گزینه های ارسال شده به متد draw() visualization تعریف کنید. همه گزینه های زیر برای همه انواع نمودار پشتیبانی نمی شوند. اسناد مربوط به نوع نمودار تصویر استاتیک خود را ببینید. شما می توانید هر پارامتر URL API نمودار را به عنوان یک گزینه ارسال کنید. برای مثال، پارامتر URL chg=50,50 از تجسم نمودار به این صورت مشخص می شود: options['chg'] = '50,50' .

نکته ای در مورد رنگ ها: گزینه های رنگی مانند colors ، color و backgroundColor در قالب رنگ Chart API مشخص شده اند. این قالب مشابه فرمت #RRGGBB است با این تفاوت که شامل یک عدد هگزادسیمال چهارم اختیاری برای نشان دادن شفافیت است. رنگ‌های قابل خواندن برای انسان، مانند «قرمز»، «سبز»، «آبی» و غیره پشتیبانی نمی‌شوند. قالب رنگ Chart API نماد # پیشرو را شامل نمی شود، اما گزینه های تجسم نمودار تصویر عمومی، کدهای رنگ را با یا بدون # می پذیرند.

نام تایپ کنید پیش فرض شرح
annotationColumns آرایه<object> هیچ یک

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

هر شیء در آرایه دارای ویژگی های زیر است:

  • column [ شماره ] - شاخص مبتنی بر صفر ستونی که متن مورد استفاده در حاشیه نویسی را نگه می دارد. شما نیازی به یک مقدار در هر سطر از این ستون ندارید.
  • positionColumn [ شماره ] - شاخص مبتنی بر صفر ستونی که نقطه داده برچسب گذاری شده را نگه می دارد. پیش فرض اولین ستون داده است.
  • color [ رشته ] - رنگ متن حاشیه نویسی در قالب رنگ Chart API . پیش‌فرض '#000000' (سیاه) است.
  • size [ عدد ] - اندازه فونت حاشیه نویسی، بر حسب پیکسل.
  • priority [ رشته ] - یا "کم"، "متوسط" یا "بالا"، که لایه ای را که برچسب باید در آن کشیده شود را مشخص می کند. پیش‌فرض «متوسط» است که مشخص می‌کند برچسب بعد از میله‌ها و خطوط کشیده می‌شود، اما قبل از برچسب‌های دیگر.
  • type [ رشته ] - یا "متن" یا "پرچم". "متن" یک حاشیه نویسی متن ساده ایجاد می کند، و "پرچم" یک حاشیه نویسی بالون گفتار ایجاد می کند.

مثال - این قطعه یک برچسب متنی 12 پیکسلی مشکی را تعریف می‌کند که متن آن از ستون 0 گرفته شده و به نقطه داده در ستون 2 همان ردیف اختصاص داده شده است: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];

رنگ پس زمینه رشته "#FFFFFF" (سفید) رنگ پس‌زمینه نمودار در قالب رنگ Chart API .
رنگ رشته خودکار یک رنگ پایه را برای استفاده برای همه سری ها مشخص می کند. هر سری یک درجه بندی از رنگ مشخص شده خواهد بود. رنگ ها در قالب رنگ Chart API مشخص می شوند. اگر colors مشخص شده باشد نادیده گرفته می شود.
رنگ ها آرایه <رشته> خودکار از این برای اختصاص رنگ های خاص به هر سری داده استفاده کنید. رنگ ها در قالب رنگ Chart API مشخص می شوند. رنگ i برای ستون داده i استفاده می‌شود، اگر تعداد ستون‌های داده بیشتر از رنگ‌ها باشد، تا ابتدا بسته می‌شود. اگر تنوع یک رنگ برای همه سری ها قابل قبول است، به جای آن از گزینه color استفاده کنید.
enableEvents بولی نادرست باعث می شود نمودارها رویدادهای ایجاد شده توسط کاربر مانند کلیک یا ماوس را روی آن پرتاب کنند. فقط برای انواع نمودار خاص پشتیبانی می شود. رویدادهای زیر را ببینید.
پر کردن بولی نادرست اگر درست است، ناحیه زیر هر خط را پر کنید. فقط برای نمودارهای خطی موجود است.
firstHiddenColumn عدد هیچ یک

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

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

[ فقط نمودار دایره ای ] چه برچسبی، در صورت وجود، برای هر برش نشان داده شود. از بین مقادیر زیر انتخاب کنید:

  • "هیچ" - بدون برچسب.
  • 'value' - مقدار برش را به عنوان یک برچسب نشان دهید.
  • 'name' - نام برش (نام ستون) را به عنوان یک برچسب نشان دهید.
افسانه رشته 'درست' محل نمایش افسانه نمودار، نسبت به نمودار. یکی از موارد زیر را مشخص کنید: 'بالا'، 'پایین'، 'چپ'، 'راست'، 'هیچکدام'. در نمودارهایی که شامل افسانه نیستند (مانند نمودارهای نقشه) نادیده گرفته می شود.
حداکثر عدد حداکثر مقدار داده حداکثر مقدار نشان داده شده در مقیاس. برای نمودارهای دایره ای نادیده گرفته شد. پیش فرض حداکثر مقدار داده است، به جز نمودارهای میله ای که پیش فرض حداکثر مقدار داده است. هنگامی که جدول دارای بیش از یک ستون داده باشد، این برای نمودارهای میله ای نادیده گرفته می شود.
دقیقه عدد حداقل مقدار داده حداقل مقدار نشان داده شده در مقیاس. برای نمودارهای دایره ای نادیده گرفته شد. پیش‌فرض حداقل مقدار داده است، به جز نمودارهای میله‌ای که پیش‌فرض صفر است. هنگامی که جدول دارای بیش از یک ستون داده باشد، این برای نمودارهای میله ای نادیده گرفته می شود.
نشان دادن دسته بندی ها بولی درست است، واقعی آیا برچسب‌ها باید در محور دسته (یعنی ردیف) ظاهر شوند یا خیر. فقط برای نمودارهای خطی و میله ای موجود است.
showValueLabels بولی درست است، واقعی True یک برچسب را در محور مقدار نمایش می دهد. فقط برای نمودارهای خطی و میله ای موجود است.
نمایش تک ستونی عدد هیچ یک فقط ستون داده های مشخص شده را ارائه می دهد. این عدد یک شاخص مبتنی بر صفر در جدول است، جایی که صفر اولین ستون داده است. رنگ تخصیص داده شده به تک ستون مانند زمانی است که همه ستون ها رندر می شوند. نمی توان با نمودارهای دایره ای یا نقشه استفاده کرد.
عنوان رشته رشته خالی عنوان نمودار. اگر مشخص نشده باشد، عنوانی نمایش داده نخواهد شد. پارامتر نمودار معادل chtt است.
valueLabelsInterval عدد خودکار فاصله زمانی که در آن برچسب های محور ارزش نشان داده می شود. به عنوان مثال، اگر min 0، max 100، و valueLabelsInterval 20 باشد، نمودار برچسب های محور را در (0، 20، 40، 60، 80 100) نشان می دهد.
عرض عدد 400 عرض نمودار، بر حسب پیکسل. اگر در محدوده قابل قبولی وجود نداشته باشد یا نباشد، از عرض عنصر حاوی استفاده می شود. اگر آن نیز خارج از محدوده قابل قبول باشد، از عرض پیش فرض استفاده خواهد شد.

مواد و روش ها

روش نوع برگشت شرح
draw(data, options) هیچ یک نقشه را ترسیم می کند.
getImageUrl() رشته نشانی وب Google Chart API مورد استفاده برای درخواست نمودار را برمی‌گرداند. توجه داشته باشید که این می تواند بیش از 2000 کاراکتر باشد. برای جزئیات بیشتر به Google Chart API مراجعه کنید.

مناسبت ها

اگر ویژگی enableEvents روی true تنظیم کنید، نمودارهای پشتیبان رویدادها را برای رویدادهای کاربر فهرست شده در جدول زیر ایجاد می کنند. همه این رویدادها یک شی event را با ویژگی های زیر برمی گرداند:

  • type - رشته ای که نوع رویداد را نشان می دهد.
  • region - یک شناسه برای منطقه تحت تأثیر. برای مشاهده لیستی از نام های موجود، پارامتر chof=json را به نوع نمودار خام اضافه کنید. برای جزئیات بیشتر به chof=json مراجعه کنید.
نام شرح مقدار را تایپ کنید
error هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود. شناسه، پیام
onmouseover زمانی که کاربر روی یک عنصر نمودار حرکت می‌کند فعال می‌شود. "ماوس بر"
onmouseout زمانی فعال می شود که کاربر از یک عنصر نمودار فاصله بگیرد. "موشواره کردن"
onclick وقتی کاربر روی عنصر نمودار کلیک می‌کند فعال می‌شود.

"کلیک"

کدام نمودارها از رویدادها پشتیبانی می کنند؟

هر نموداری که از پارامتر chof=json پشتیبانی می کند، رویدادهای پرتاب را پشتیبانی می کند (یعنی همه نمودارها به جز نمودارهای خاص، به عنوان مثال کدهای QR).

مثال مدیریت رویداد

در اینجا نمونه ای وجود دارد که نواری را نشان می دهد که کلیک های ماوس را ثبت می کند. 

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

سیاست داده

داده ها به سرویس Google Chart API ارسال می شوند.

بومی سازی

این تجسم از هر محلی سازی پشتیبانی شده توسط سرویس نمودار Google پشتیبانی می کند.