تجسم: نمودار حباب

بررسی اجمالی

نمودار حبابی که در مرورگر با استفاده از SVG یا VML ارائه می‌شود. هنگام نگه داشتن ماوس روی حباب ها نکاتی را نشان می دهد.

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

مثال 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="series_chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

رنگ بر اساس اعداد

همانطور که در مثال زیر نشان داده شده است می توانید از گزینه colorAxis برای رنگ آمیزی حباب ها متناسب با یک مقدار استفاده کنید. 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

سفارشی کردن برچسب ها

با گزینه bubble.textStyle می توانید فونت، فونت و رنگ حباب را کنترل کنید:

گزینه ها
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
صفحه وب کامل
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>

برچسب های نمودار بالا به سختی خوانده می شوند و یکی از دلایل آن فضای سفید اطراف آنهاست. به آن هاله می گویند، و اگر نمودارهای خود را بدون آنها ترجیح می دهید، می توانید bubble.textStyle.auraColor را روی 'none' تنظیم کنید.

گزینه ها
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
صفحه وب کامل
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>

بارگذاری

نام بسته google.charts.load "corechart" است.

  google.charts.load("current", {packages: ["corechart"]});

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

  var visualization = new google.visualization.BubbleChart(container);

فرمت داده ها

ردیف: هر ردیف در جدول نشان دهنده یک حباب است.

ستون ها:

ستون 0 ستون 1 ستون 2 ستون 3 (اختیاری) ستون 4 (اختیاری)
هدف: شناسه (نام) حباب مختصات X Y هماهنگ کنید بسته به نوع ستون، شناسه سری یا مقداری که رنگ را در مقیاس گرادیان نشان می دهد:
  • رشته
    رشته ای که حباب های یک سری را مشخص می کند. از یک مقدار برای شناسایی تمام حباب هایی که متعلق به یک سری هستند استفاده کنید. حباب های همان سری به همان رنگ اختصاص داده می شوند. سری را می توان با استفاده از گزینه series پیکربندی کرد.
  • عدد
    مقداری که با استفاده از گزینه colorAxis به یک رنگ واقعی در مقیاس گرادیان نگاشت می شود.
 اندازه؛ مقادیر موجود در این ستون با استفاده از گزینه sizeAxis به مقادیر واقعی پیکسل نگاشت می شوند.
نوع داده: رشته عدد عدد رشته یا عدد عدد

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

نام
انیمیشن.مدت

مدت زمان انیمیشن، بر حسب میلی ثانیه. برای جزئیات، به مستندات انیمیشن مراجعه کنید.

نوع: شماره
پیش فرض: 0
انیمیشن.تسهیل

تابع easing برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:

  • "خطی" - سرعت ثابت.
  • 'in' - سهولت در ورود - آهسته شروع کنید و سرعت خود را افزایش دهید.
  • "خارج" - آسان کردن - سریع شروع کنید و سرعت را کاهش دهید.
  • 'inAndOut' - سهولت در ورود و خروج - آهسته شروع کنید، سرعت دهید، سپس سرعت را کم کنید.
نوع: رشته
پیش فرض: "خطی"
انیمیشن.استارت آپ

تعیین می کند که آیا نمودار در قرعه کشی اولیه متحرک می شود یا خیر. اگر true ، نمودار از خط مبنا شروع می شود و به حالت نهایی خود متحرک می شود.

نوع: بولی
پیش فرض نادرست
axisTitlesPosition

محل قرار دادن عناوین محورها، در مقایسه با منطقه نمودار. مقادیر پشتیبانی شده:

  • در - عناوین محورها را در داخل ناحیه نمودار رسم کنید.
  • خارج - عناوین محورها را خارج از ناحیه نمودار رسم کنید.
  • هیچ - عناوین محورها را حذف کنید.
نوع: رشته
پیش فرض: "خارج"
رنگ پس زمینه

رنگ پس زمینه برای ناحیه اصلی نمودار. می تواند یک رشته رنگی ساده HTML باشد، برای مثال: 'red' یا '#00cc00' ، یا یک شی با ویژگی های زیر.

نوع: رشته یا شی
پیش فرض: "سفید"
backgroundColor.stroke

رنگ حاشیه نمودار، به عنوان یک رشته رنگ HTML.

نوع: رشته
پیش‌فرض: '#666'
backgroundColor.strokeWidth

عرض حاشیه، بر حسب پیکسل.

نوع: شماره
پیش فرض: 0
backgroundColor.fill

رنگ پر کردن نمودار، به عنوان یک رشته رنگ HTML.

نوع: رشته
پیش فرض: "سفید"
حباب

یک شی با اعضایی برای پیکربندی ویژگی های بصری حباب ها.

نوع: شی
پیش فرض: null
حباب. کدورت

کدورت حباب ها، که در آن 0 کاملاً شفاف و 1 کاملاً مات است.

نوع: عدد بین 0.0 و 1.0
پیش فرض: 0.8
حباب.سکته مغزی

رنگ سکته مغزی حباب ها.

نوع: رشته
پیش‌فرض: «#cccc»
bubble.textStyle

یک شی که سبک متن حبابی را مشخص می کند. شیء دارای این قالب است:

{color: <string>, fontName: <string>, fontSize: <number>}

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
نمودار مساحت

یک شی با اعضا برای پیکربندی مکان و اندازه ناحیه نمودار (جایی که خود نمودار رسم شده است، به استثنای محورها و افسانه ها). دو فرمت پشتیبانی می شود: یک عدد یا یک عدد به دنبال ٪. یک عدد ساده یک مقدار در پیکسل است. یک عدد به دنبال آن % یک درصد است. مثال: chartArea:{left:20,top:0,width:'50%',height:'75%'}

نوع: شی
پیش فرض: null
chartArea.backgroundColor
رنگ پس زمینه ناحیه نمودار هنگامی که از یک رشته استفاده می شود، می تواند یک رشته هگزا (به عنوان مثال، '#fdc') یا یک نام رنگ انگلیسی باشد. هنگامی که یک شی استفاده می شود، ویژگی های زیر را می توان ارائه داد:
  • stroke : رنگی که به صورت رشته هگزا یا رنگ انگلیسی ارائه می شود.
  • strokeWidth : در صورت ارائه، یک مرز در اطراف منطقه نمودار با عرض داده شده (و با رنگ stroke ) ترسیم می کند.
نوع: رشته یا شی
پیش فرض: "سفید"
نمودار Area.left

چقدر می توان نمودار را از حاشیه سمت چپ رسم کرد.

نوع: عدد یا رشته
پیش فرض: خودکار
نمودار Area.top

چقدر می توان نمودار را از حاشیه بالایی رسم کرد.

نوع: عدد یا رشته
پیش فرض: خودکار
نمودار مساحت.عرض

عرض منطقه نمودار

نوع: عدد یا رشته
پیش فرض: خودکار
نمودار مساحت.ارتفاع

ارتفاع منطقه نمودار

نوع: عدد یا رشته
پیش فرض: خودکار
رنگ ها

رنگ هایی که برای عناصر نمودار استفاده می شود. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: colors:['red','#004411'] .

نوع: آرایه از رشته ها
پیش فرض: رنگ های پیش فرض
colorAxis

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
نوع: شی
پیش فرض: null
colorAxis.minValue

در صورت وجود، حداقل مقدار را برای داده های رنگ نمودار مشخص می کند. مقادیر داده های رنگی از این مقدار و کمتر به عنوان اولین رنگ در محدوده colorAxis.colors ارائه می شود.

نوع: شماره
پیش فرض: حداقل مقدار ستون رنگ در داده های نمودار
colorAxis.maxValue

در صورت وجود، حداکثر مقدار را برای داده های رنگ نمودار مشخص می کند. مقادیر داده های رنگی از این مقدار و بالاتر به عنوان آخرین رنگ در محدوده colorAxis.colors ارائه می شود.

نوع: شماره
پیش فرض: حداکثر مقدار ستون رنگ در داده های نمودار
colorAxis.values

در صورت وجود، نحوه ارتباط مقادیر با رنگ ها را کنترل می کند. هر مقدار با رنگ مربوطه در آرایه colorAxis.colors مرتبط است. این مقادیر برای داده های رنگ نمودار اعمال می شود. رنگ آمیزی با توجه به گرادیان مقادیر مشخص شده در اینجا انجام می شود. عدم تعیین مقدار برای این گزینه معادل تعیین [minValue, maxValue] است.

نوع: آرایه اعداد
پیش فرض: null
colorAxis.colors

رنگ هایی که به مقادیر در تجسم اختصاص داده می شوند. آرایه ای از رشته ها، که در آن هر عنصر یک رشته رنگی HTML است، به عنوان مثال: colorAxis: {colors:['red','#004411']} . شما باید حداقل دو مقدار داشته باشید. گرادیان شامل تمام مقادیر شما، به اضافه مقادیر واسطه محاسبه شده، با اولین رنگ به عنوان کوچکترین مقدار و آخرین رنگ به عنوان بالاترین می شود.

نوع: مجموعه ای از رشته های رنگی
پیش فرض: null
colorAxis.legend

یک شی که سبک افسانه رنگ گرادیان را مشخص می کند.

نوع: شی
پیش فرض: null
colorAxis.legend.position

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

  • "بالا" - بالای نمودار.
  • "پایین" - زیر نمودار.
  • 'in' - در داخل نمودار، در بالا.
  • "هیچ" - هیچ افسانه ای نمایش داده نمی شود.
نوع: شی
پیش فرض: "بالا"
colorAxis.legend.textStyle

یک شی که سبک متن افسانه را مشخص می کند. شیء دارای این قالب است:

{color: <string>, fontName: <string>, fontSize: <number>}

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
colorAxis.legend.numberFormat

یک رشته قالب برای برچسب های عددی. این زیر مجموعه ای از الگوی ICU است. به عنوان مثال، {numberFormat:'.##'} مقادیر "10.66"، "10.6" و "10.0" را برای مقادیر 10.666، 10.6، و 10 نمایش می دهد.

نوع: رشته
پیش فرض: خودکار
فعال کردن تعامل

آیا نمودار رویدادهای مبتنی بر کاربر را نشان می دهد یا به تعامل کاربر واکنش نشان می دهد. اگر نادرست باشد، نمودار «انتخاب» یا سایر رویدادهای مبتنی بر تعامل را پرتاب نمی‌کند (اما رویدادهای آماده یا خطا را پرتاب می‌کند )، و متن شناور را نمایش نمی‌دهد یا بسته به ورودی کاربر تغییر نمی‌کند.

نوع: بولی
پیش فرض: درست است
کاوشگر

گزینه explorer به کاربران اجازه می دهد تا نمودارهای گوگل را حرکت داده و بزرگنمایی کنند. explorer: {} رفتار کاوشگر پیش‌فرض را ارائه می‌کند و به کاربران امکان می‌دهد با کشیدن به صورت افقی و عمودی حرکت کنند و با پیمایش بزرگ‌نمایی کنند.

این ویژگی آزمایشی است و ممکن است در نسخه های بعدی تغییر کند.

توجه: کاوشگر فقط با محورهای پیوسته (مانند اعداد یا تاریخ) کار می کند.

نوع: شی
پیش فرض: null
explorer.actions

Google Charts Explorer از سه عمل پشتیبانی می کند:

  • dragToPan : برای حرکت در نمودار به صورت افقی و عمودی بکشید. برای حرکت فقط در امتداد محور افقی، از explorer: { axis: 'horizontal' } . به طور مشابه برای محور عمودی.
  • dragToZoom : رفتار پیش‌فرض کاوشگر این است که وقتی کاربر اسکرول می‌کند، بزرگ‌نمایی و کوچک‌نمایی می‌کند. اگر explorer: { actions: ['dragToZoom', 'rightClickToReset'] } استفاده می شود، با کشیدن یک ناحیه مستطیلی به آن ناحیه بزرگنمایی می شود. توصیه می کنیم هر زمان که dragToZoom استفاده می شود از rightClickToReset استفاده کنید. برای سفارشی‌سازی‌های بزرگ‌نمایی، explorer.maxZoomIn ، explorer.maxZoomOut و explorer.zoomDelta را ببینید.
  • rightClickToReset : کلیک راست بر روی نمودار آن را به صفحه اصلی و سطح زوم برمی گرداند.
نوع: آرایه از رشته ها
پیش‌فرض: ['dragToPan', 'rightClickToReset']
explorer.axis

به طور پیش فرض، کاربران می توانند در صورت استفاده از گزینه explorer ، هم به صورت افقی و هم به صورت عمودی حرکت کنند. اگر می خواهید کاربران فقط به صورت افقی حرکت کنند، از explorer: { axis: 'horizontal' } . به طور مشابه، explorer: { axis: 'vertical' } پانینگ فقط عمودی را فعال می کند.

نوع: رشته
پیش‌فرض: هم افقی و هم عمودی
explorer.keepInBounds

به‌طور پیش‌فرض، کاربران می‌توانند بدون توجه به جایی که داده‌ها هستند، همه جا حرکت کنند. برای اطمینان از اینکه کاربران فراتر از نمودار اصلی حرکت نمی کنند، از explorer: { keepInBounds: true } .

نوع: بولی
پیش فرض: نادرست
explorer.maxZoomIn

حداکثری که کاوشگر می تواند بزرگنمایی کند. به طور پیش فرض، کاربران می توانند به اندازه ای بزرگنمایی کنند که فقط 25٪ از نمای اصلی را ببینند. تنظیم explorer: { maxZoomIn: .5 } به کاربران این امکان را می دهد که فقط به اندازه کافی بزرگنمایی کنند تا نیمی از نمای اصلی را ببینند.

نوع: شماره
پیش فرض: 0.25
explorer.maxZoomOut

حداکثری که کاوشگر می تواند بزرگنمایی کند. به‌طور پیش‌فرض، کاربران می‌توانند به اندازه‌ای بزرگ‌نمایی کنند که نمودار تنها 1/4 فضای موجود را اشغال کند. تنظیم explorer: { maxZoomOut: 8 } به کاربران این امکان را می دهد که به اندازه ای بزرگنمایی کنند که نمودار فقط 1/8 فضای موجود را اشغال کند.

نوع: شماره
پیش فرض: 4
explorer.zoomDelta

وقتی کاربران بزرگ‌نمایی یا کوچک‌نمایی می‌کنند، explorer.zoomDelta تعیین می‌کند که چقدر بزرگ‌نمایی می‌کنند. هرچه عدد کوچکتر باشد، زوم نرمتر و کندتر است.

نوع: شماره
پیش فرض: 1.5
اندازه فونت

اندازه فونت پیش‌فرض، بر حسب پیکسل، تمام متن‌های نمودار. می‌توانید با استفاده از ویژگی‌های عناصر نمودار خاص، این مورد را لغو کنید.

نوع: شماره
پیش فرض: خودکار
نام قلم

صورت فونت پیش‌فرض برای تمام متن‌های نمودار. می‌توانید با استفاده از ویژگی‌های عناصر نمودار خاص، این مورد را لغو کنید.

نوع: رشته
پیش فرض: "Arial"
forceIFrame

نمودار را درون یک قاب درون خطی رسم می کند. (توجه داشته باشید که در IE8، این گزینه نادیده گرفته می شود؛ همه نمودارهای IE8 در i-frame ترسیم می شوند.)

نوع: بولی
پیش فرض: نادرست
hAxis

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
نوع: شی
پیش فرض: null
hAxis.baseline

خط مبنا برای محور افقی.

نوع: شماره
پیش فرض: خودکار
hAxis.baselineColor

رنگ خط مبنا برای محور افقی. می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' .

نوع: شماره
پیش فرض: "سیاه"
hAxis.direction

جهتی که در آن مقادیر در امتداد محور افقی رشد می کنند. برای معکوس کردن ترتیب مقادیر -1 مشخص کنید.

نوع: 1 یا -1
پیش فرض: 1
hAxis.format

یک رشته قالب برای برچسب های محورهای عددی. این زیر مجموعه ای از الگوی ICU است. برای مثال، {format:'#,###%'} مقادیر "1000%"، "750%" و "50%" را برای مقادیر 10، 7.5 و 0.5 نمایش می دهد. شما همچنین می توانید یکی از موارد زیر را تهیه کنید:

  • {format: 'none'} : اعداد را بدون قالب بندی نمایش می دهد (به عنوان مثال، 8000000)
  • {format: 'decimal'} : اعداد را با هزاران جداکننده نمایش می دهد (مثلاً 8,000,000)
  • {format: 'scientific'} : اعداد را به صورت نماد علمی نمایش می دهد (مثلاً 8e6)
  • {format: 'currency'} : اعداد را به واحد پول محلی نمایش می دهد (مثلاً 8,000,000 دلار)
  • {format: 'percent'} : اعداد را به صورت درصد نمایش می دهد (به عنوان مثال، 800,000,000%)
  • {format: 'short'} : نمایش اعداد مختصر (مثلاً 8M)
  • {format: 'long'} : اعداد را به صورت کلمات کامل نمایش می دهد (مثلاً 8 میلیون)

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

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

نوع: رشته
پیش فرض: خودکار
hAxis.gridlines

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

{color: '#333', minSpacing: 20}
نوع: شی
پیش فرض: null
hAxis.gridlines.color

رنگ خطوط شبکه افقی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: '#CCC'
hAxis.gridlines.count

تعداد تقریبی خطوط شبکه افقی در داخل منطقه نمودار. اگر یک عدد مثبت برای gridlines.count مشخص کنید، از آن برای محاسبه minSpacing بین خطوط شبکه استفاده می شود. شما می توانید مقدار 1 را برای ترسیم یک خط شبکه یا 0 برای ترسیم هیچ خط شبکه ای مشخص کنید. برای محاسبه خودکار تعداد خطوط شبکه بر اساس گزینه های دیگر، -1 را که پیش فرض است مشخص کنید.

نوع: شماره
پیش فرض: -1
hAxis.gridlines.units

وقتی با خطوط شبکه محاسبه شده نمودار استفاده می شود، قالب پیش فرض را برای جنبه های مختلف انواع داده های تاریخ/تاریخ/زمان روز لغو می کند. امکان قالب بندی سال ها، ماه ها، روزها، ساعت ها، دقیقه ها، ثانیه ها و میلی ثانیه ها را فراهم می کند.

قالب کلی:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

اطلاعات اضافی را می توان در تاریخ و زمان یافت.

نوع: شی
پیش فرض: null
hAxis.minorGridlines

یک شی با اعضایی برای پیکربندی خطوط شبکه فرعی در محور افقی، مشابه گزینه hAxis.gridlines.

نوع: شی
پیش فرض: null
hAxis.minorGridlines.color

رنگ خطوط شبکه افقی فرعی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: ترکیبی از خط شبکه و رنگ‌های پس‌زمینه
hAxis.minorGridlines.count

گزینه minorGridlines.count بیشتر منسوخ شده است، به جز غیرفعال کردن خطوط شبکه کوچک با تنظیم شمارش بر روی 0. تعداد خطوط شبکه فرعی اکنون کاملاً به فاصله بین خطوط شبکه اصلی (به hAxis.gridlines.interval مراجعه کنید) و حداقل فضای مورد نیاز بستگی دارد (نگاه کنید به). hAxis.minorGridlines.minSpacing ).

نوع: شماره
پیش فرض: 1
hAxis.minorGridlines.units

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

قالب کلی:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

اطلاعات اضافی را می توان در تاریخ و زمان یافت.

نوع: شی
پیش فرض: null
hAxis.logScale

ویژگی hAxis که محور افقی را به مقیاس لگاریتمی تبدیل می کند (نیازمند است همه مقادیر مثبت باشند). درست است برای بله.

نوع: بولی
پیش فرض: نادرست
hAxis.scaleType

ویژگی hAxis که باعث می شود محور افقی یک مقیاس لگاریتمی باشد. می تواند یکی از موارد زیر باشد:

  • null - هیچ مقیاس لگاریتمی انجام نمی شود.
  • "log" - مقیاس بندی لگاریتمی. مقادیر منفی و صفر رسم نمی شوند. این گزینه مانند تنظیم hAxis: { logscale: true } .
  • 'mirrorLog' - مقیاس لگاریتمی که در آن مقادیر منفی و صفر رسم می شوند. مقدار رسم شده یک عدد منفی منفی لاگ قدر مطلق است. مقادیر نزدیک به 0 در مقیاس خطی رسم می شوند.
نوع: رشته
پیش فرض: null
hAxis.textPosition

موقعیت متن محور افقی، نسبت به ناحیه نمودار. مقادیر پشتیبانی شده: "out"، "in"، "none".

نوع: رشته
پیش فرض: "خارج"
hAxis.textStyle

یک شی که سبک متن محور افقی را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

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

viewWindow به طور خودکار گسترش می‌یابد تا تیک‌های حداقل و حداکثر را شامل شود، مگر اینکه یک viewWindow.min یا viewWindow.max را برای لغو تعیین کنید.

مثال ها:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
نوع: آرایه ای از عناصر
پیش فرض: خودکار
hAxis.title

ویژگی hAxis که عنوان محور افقی را مشخص می کند.

نوع: رشته
پیش فرض: null
hAxis.titleTextStyle

یک شی که سبک متن عنوان محور افقی را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

حداکثر مقدار محور افقی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها به سمت راست خواهد بود. اگر این مقدار روی مقداری کوچکتر از حداکثر مقدار x داده تنظیم شود، نادیده گرفته می شود. hAxis.viewWindow.max این ویژگی را لغو می کند.

نوع: شماره
پیش فرض: خودکار
hAxis.minValue

مقدار min محور افقی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها به سمت چپ خواهد بود. اگر این مقدار روی مقداری بیشتر از حداقل مقدار x داده تنظیم شود نادیده گرفته می شود. hAxis.viewWindow.min این ویژگی را لغو می کند.

نوع: شماره
پیش فرض: خودکار
hAxis.viewWindowMode

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

  • 'pretty' - مقادیر افقی را به گونه ای مقیاس دهید که مقادیر حداکثر و حداقل داده اندکی در سمت چپ و راست ناحیه نمودار نمایش داده شوند. ViewWindow برای اعداد به نزدیکترین خط شبکه اصلی یا برای تاریخ و زمان به نزدیکترین خط شبکه کوچک گسترش می یابد.
  • "بیشینه سازی" - مقادیر افقی را به گونه ای تنظیم کنید که حداکثر و حداقل مقادیر داده، سمت چپ و راست ناحیه نمودار را لمس کنند. این باعث می شود که haxis.viewWindow.min و haxis.viewWindow.max نادیده گرفته شوند.
  • 'explicit' - یک گزینه منسوخ برای تعیین مقادیر مقیاس چپ و راست ناحیه نمودار. (منسوخ شده است زیرا با haxis.viewWindow.min و haxis.viewWindow.max اضافی است.) مقادیر داده خارج از این مقادیر برش داده می شوند. شما باید یک شی hAxis.viewWindow را تعیین کنید که مقادیر حداکثر و حداقل را برای نمایش توصیف می کند.
نوع: رشته
پیش فرض: معادل «زیبا» است، اما در صورت استفاده از haxis.viewWindow.min و haxis.viewWindow.max اولویت دارند.
hAxis.viewWindow

محدوده برش محور افقی را مشخص می کند.

نوع: شی
پیش فرض: null
hAxis.viewWindow.max

حداکثر مقدار داده افقی برای ارائه.

وقتی hAxis.viewWindowMode 'زیبا' یا 'بیشینه شده' است نادیده گرفته می شود.

نوع: شماره
پیش فرض: خودکار
hAxis.viewWindow.min

حداقل مقدار داده افقی برای ارائه.

وقتی hAxis.viewWindowMode 'زیبا' یا 'بیشینه شده' است نادیده گرفته می شود.

نوع: شماره
پیش فرض: خودکار
ارتفاع

ارتفاع نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: ارتفاع عنصر حاوی
افسانه

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
نوع: شی
پیش فرض: null
افسانه.تراز

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

  • 'شروع' - با شروع منطقه اختصاص داده شده برای افسانه تراز شده است.
  • "مرکز" - در مرکز منطقه اختصاص داده شده برای افسانه.
  • "پایان" - در انتهای ناحیه اختصاص داده شده برای افسانه تراز شده است.

شروع، مرکز و پایان نسبت به سبک - عمودی یا افقی - افسانه است. برای مثال، در افسانه «راست»، «شروع» و «پایان» به ترتیب در بالا و پایین هستند. برای افسانه "بالا"، "شروع" و "پایان" به ترتیب در سمت چپ و راست منطقه قرار می گیرند.

مقدار پیش فرض به موقعیت افسانه بستگی دارد. برای افسانه‌های «پایین»، پیش‌فرض «مرکز» است. افسانه های دیگر به طور پیش فرض "شروع" هستند.

نوع: رشته
پیش فرض: خودکار
legend.maxLines

حداکثر تعداد خطوط در افسانه. این را روی عددی بزرگتر از یک تنظیم کنید تا خطوطی به افسانه خود اضافه کنید. توجه: منطق دقیق مورد استفاده برای تعیین تعداد واقعی خطوط ارائه شده هنوز در جریان است.

این گزینه در حال حاضر فقط زمانی کار می کند که legend.position 'بالا' باشد.

نوع: شماره
پیش فرض: 1
legend.pageIndex

فهرست اولیه صفحه بر اساس صفر انتخاب شده از افسانه.

نوع: شماره
پیش فرض: 0
افسانه. موقعیت

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

  • "پایین" - زیر نمودار.
  • "چپ" - در سمت چپ نمودار، مشروط بر اینکه محور چپ هیچ سری مرتبط با آن نداشته باشد. بنابراین اگر افسانه سمت چپ را می خواهید، از گزینه targetAxisIndex: 1 استفاده کنید.
  • 'in' - در داخل نمودار، در گوشه سمت چپ بالا.
  • "هیچ" - هیچ افسانه ای نمایش داده نمی شود.
  • "راست" - در سمت راست نمودار. با گزینه vAxes ناسازگار است.
  • "بالا" - بالای نمودار.
نوع: رشته
پیش فرض: "درست"
legend.textStyle

یک شی که سبک متن افسانه را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
انتخاب حالت

وقتی selectionMode 'multiple' است، کاربران ممکن است چندین نقطه داده را انتخاب کنند.

نوع: رشته
پیش فرض: "تک"
سلسله

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

  • color - رنگی که برای این سری استفاده می شود. یک رشته رنگ معتبر HTML را مشخص کنید.
  • visibleInLegend - یک مقدار بولی، که در آن true به این معنی است که سری باید یک ورودی افسانه داشته باشد و false به این معنی است که نباید. پیش فرض درست است.
مثال: 
series: {'Europe': {color: 'green'}}
نوع: شی با اشیاء تو در تو
پیش فرض: {}
اندازه محور

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

 {minValue: 0,  maxSize: 20}
نوع: شی
پیش فرض: null
sizeAxis.maxSize

حداکثر شعاع بزرگترین حباب ممکن، بر حسب پیکسل.

نوع: شماره
پیش فرض: 30
sizeAxis.maxValue

مقدار اندازه (همانطور که در داده های نمودار نشان داده می شود) که باید به sizeAxis.maxSize نگاشت شود. مقادیر بزرگتر به این مقدار برش داده می شود.

نوع: شماره
پیش فرض: حداکثر مقدار ستون اندازه در داده های نمودار
sizeAxis.minSize

حداقل شعاع کوچکترین حباب ممکن، بر حسب پیکسل.

نوع: شماره
پیش فرض: 5
sizeAxis.minValue

مقدار اندازه (همانطور که در داده های نمودار نشان داده می شود) که باید به sizeAxis.minSize نگاشت شود. مقادیر کوچکتر به این مقدار برش داده می شود.

نوع: شماره
پیش فرض: حداقل مقدار ستون اندازه در داده های نمودار
sortBubblesBySize

اگر درست است، حباب ها را بر اساس اندازه مرتب می کند تا حباب های کوچکتر بالای حباب های بزرگتر ظاهر شوند. اگر نادرست باشد، حباب ها بر اساس ترتیبشان در DataTable مرتب می شوند.

نوع: بولی
پیش فرض: درست است
موضوع

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

  • 'maximized' - مساحت نمودار را به حداکثر می رساند و افسانه و همه برچسب ها را در داخل منطقه نمودار ترسیم می کند. گزینه های زیر را تنظیم می کند: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
نوع: رشته
پیش فرض: null
عنوان

متن برای نمایش در بالای نمودار.

نوع: رشته
پیش فرض: بدون عنوان
محل عنوان

محل قرار دادن عنوان نمودار، در مقایسه با منطقه نمودار. مقادیر پشتیبانی شده:

  • در - عنوان را داخل ناحیه نمودار بکشید.
  • بیرون - عنوان را خارج از ناحیه نمودار بکشید.
  • هیچ - عنوان را حذف کنید.
نوع: رشته
پیش فرض: "خارج"
titleTextStyle

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

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
راهنمای ابزار

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

{textStyle: {color: '#FF0000'}, showColorCode: true}
نوع: شی
پیش فرض: null
tooltip.isHtml

اگر روی true تنظیم شده باشد، از نکات ابزار رندر شده HTML (به جای SVG) استفاده کنید. برای جزئیات بیشتر به سفارشی کردن محتوای راهنمای ابزار مراجعه کنید.

توجه: سفارشی‌سازی محتوای راهنمای ابزار HTML از طریق نقش داده ستون راهنمای ابزار توسط تجسم نمودار حباب پشتیبانی نمی‌شود .

نوع: بولی
پیش فرض: نادرست
tooltip.textStyle

یک شی که سبک متن راهنمای ابزار را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

تعامل کاربر که باعث می شود راهنمای ابزار نمایش داده شود:

  • 'focus' - وقتی کاربر روی عنصر قرار می گیرد، راهنمای ابزار نمایش داده می شود.
  • 'none' - راهنمای ابزار نمایش داده نخواهد شد.
  • 'انتخاب' - وقتی کاربر عنصر را انتخاب می کند، راهنمای ابزار نمایش داده می شود.
نوع: رشته
پیش فرض: "تمرکز"
vAxis

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
نوع: شی
پیش فرض: null
vAxis.baseline

ویژگی vAxis که خط مبنا را برای محور عمودی مشخص می کند. اگر خط مبنا بزرگتر از بالاترین خط شبکه یا کوچکتر از پایین ترین خط شبکه باشد، به نزدیکترین خط شبکه گرد می شود.

نوع: شماره
پیش فرض: خودکار
vAxis.baselineColor

رنگ خط مبنا را برای محور عمودی مشخص می کند. می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' .

نوع: شماره
پیش فرض: "سیاه"
vAxis.direction

جهتی که در آن مقادیر در امتداد محور عمودی رشد می کنند. به طور پیش فرض، مقادیر پایین در پایین نمودار قرار دارند. برای معکوس کردن ترتیب مقادیر -1 مشخص کنید.

نوع: 1 یا -1
پیش فرض: 1
vAxis.format

یک رشته قالب برای برچسب های محورهای عددی. این زیر مجموعه ای از الگوی ICU است. برای مثال، {format:'#,###%'} مقادیر "1000%"، "750%" و "50%" را برای مقادیر 10، 7.5 و 0.5 نمایش می دهد. شما همچنین می توانید یکی از موارد زیر را تهیه کنید:

  • {format: 'none'} : اعداد را بدون قالب بندی نمایش می دهد (به عنوان مثال، 8000000)
  • {format: 'decimal'} : اعداد را با هزاران جداکننده نمایش می دهد (مثلاً 8,000,000)
  • {format: 'scientific'} : اعداد را به صورت نماد علمی نمایش می دهد (مثلاً 8e6)
  • {format: 'currency'} : اعداد را به واحد پول محلی نمایش می دهد (مثلاً 8,000,000 دلار)
  • {format: 'percent'} : اعداد را به صورت درصد نمایش می دهد (به عنوان مثال، 800,000,000%)
  • {format: 'short'} : نمایش اعداد مختصر (مثلاً 8M)
  • {format: 'long'} : اعداد را به صورت کلمات کامل نمایش می دهد (مثلاً 8 میلیون)

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

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

نوع: رشته
پیش فرض: خودکار
vAxis.gridlines

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

{color: '#333', minSpacing: 20}
نوع: شی
پیش فرض: null
vAxis.gridlines.color

رنگ خطوط شبکه عمودی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: '#CCC'
vAxis.gridlines.count

تعداد تقریبی خطوط شبکه افقی در داخل منطقه نمودار. اگر یک عدد مثبت برای gridlines.count مشخص کنید، از آن برای محاسبه minSpacing بین خطوط شبکه استفاده می شود. شما می توانید مقدار 1 را برای ترسیم یک خط شبکه یا 0 برای ترسیم هیچ خط شبکه ای مشخص کنید. برای محاسبه خودکار تعداد خطوط شبکه بر اساس گزینه های دیگر، -1 را که پیش فرض است مشخص کنید.

نوع: شماره
پیش فرض: -1
vAxis.gridlines.units

وقتی با خطوط شبکه محاسبه شده نمودار استفاده می شود، قالب پیش فرض را برای جنبه های مختلف انواع داده های تاریخ/تاریخ/زمان روز لغو می کند. امکان قالب بندی سال ها، ماه ها، روزها، ساعت ها، دقیقه ها، ثانیه ها و میلی ثانیه ها را فراهم می کند.

قالب کلی:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

اطلاعات اضافی را می توان در تاریخ و زمان یافت.

نوع: شی
پیش فرض: null
vAxis.minorGridlines

یک شی با اعضایی برای پیکربندی خطوط شبکه فرعی در محور عمودی، مشابه گزینه vAxis.gridlines.

نوع: شی
پیش فرض: null
vAxis.minorGridlines.color

رنگ خطوط شبکه فرعی عمودی در داخل منطقه نمودار. یک رشته رنگ معتبر HTML را مشخص کنید.

نوع: رشته
پیش‌فرض: ترکیبی از خط شبکه و رنگ‌های پس‌زمینه
vAxis.minorGridlines.count

گزینه minorGridlines.count عمدتا منسوخ شده است، به جز غیرفعال کردن خطوط شبکه کوچک با تنظیم شمارش بر روی 0. تعداد خطوط شبکه کوچک به فاصله بین خطوط شبکه اصلی (به vAxis.gridlines.interval مراجعه کنید) و حداقل فضای مورد نیاز (به vAxis مراجعه کنید) بستگی دارد. minorGridlines.minSpacing).

نوع: شماره
پیش فرض: 1
vAxis.minorGridlines.units

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

قالب کلی:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

اطلاعات اضافی را می توان در تاریخ و زمان یافت.

نوع: شی
پیش فرض: null
vAxis.logScale

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

نوع: بولی
پیش فرض: نادرست
vAxis.scaleType

ویژگی vAxis که باعث می شود محور عمودی یک مقیاس لگاریتمی باشد. می تواند یکی از موارد زیر باشد:

  • null - هیچ مقیاس لگاریتمی انجام نمی شود.
  • "log" - مقیاس بندی لگاریتمی. مقادیر منفی و صفر رسم نمی شوند. این گزینه مانند تنظیم vAxis: { logscale: true } .
  • 'mirrorLog' - مقیاس لگاریتمی که در آن مقادیر منفی و صفر رسم می شوند. مقدار رسم شده یک عدد منفی منفی لاگ قدر مطلق است. مقادیر نزدیک به 0 در مقیاس خطی رسم می شوند.
نوع: رشته
پیش فرض: null
vAxis.textPosition

موقعیت متن محور عمودی، نسبت به ناحیه نمودار. مقادیر پشتیبانی شده: "out"، "in"، "none".

نوع: رشته
پیش فرض: "خارج"
vAxis.textStyle

یک شی که سبک متن محور عمودی را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.tick

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

viewWindow به طور خودکار گسترش می‌یابد تا تیک‌های حداقل و حداکثر را شامل شود، مگر اینکه یک viewWindow.min یا viewWindow.max را برای لغو تعیین کنید.

مثال ها:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
نوع: آرایه ای از عناصر
پیش فرض: خودکار
vAxis.title

ویژگی vAxis که عنوانی را برای محور عمودی مشخص می کند.

نوع: رشته
پیش فرض: بدون عنوان
vAxis.titleTextStyle

یک شی که سبک متن عنوان محور عمودی را مشخص می کند. شیء دارای این قالب است:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color می تواند هر رشته رنگی HTML باشد، به عنوان مثال: 'red' یا '#00cc00' . همچنین fontName و fontSize را ببینید.

نوع: شی
پیش‌فرض: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

حداکثر مقدار محور عمودی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها صعودی خواهد بود. اگر این مقدار روی مقداری کوچکتر از حداکثر مقدار y داده تنظیم شود نادیده گرفته می شود. vAxis.viewWindow.max این ویژگی را لغو می کند.

نوع: شماره
پیش فرض: خودکار
vAxis.minValue

مقدار حداقل محور عمودی را به مقدار مشخص شده منتقل می کند. این در اکثر نمودارها نزولی خواهد بود. اگر این مقدار روی مقداری بیشتر از حداقل مقدار y داده تنظیم شود نادیده گرفته می شود. vAxis.viewWindow.min این ویژگی را لغو می کند.

نوع: شماره
پیش فرض: null
vAxis.viewWindowMode

نحوه مقیاس بندی محور عمودی برای ارائه مقادیر در ناحیه نمودار را مشخص می کند. مقادیر رشته زیر پشتیبانی می شوند:

  • 'pretty' - مقادیر عمودی را به گونه ای مقیاس دهید که حداکثر و حداقل مقادیر داده اندکی در پایین و بالای ناحیه نمودار ارائه شوند. ViewWindow برای اعداد به نزدیکترین خط شبکه اصلی یا برای تاریخ و زمان به نزدیکترین خط شبکه کوچک گسترش می یابد.
  • "بیشینه سازی" - مقادیر عمودی را به گونه ای مقیاس دهید که حداکثر و حداقل مقادیر داده، بالا و پایین ناحیه نمودار را لمس کنند. این باعث می شود که vaxis.viewWindow.min و vaxis.viewWindow.max نادیده گرفته شوند.
  • 'explicit' - یک گزینه منسوخ برای تعیین مقادیر مقیاس بالا و پایین ناحیه نمودار. (منسوخ شده است زیرا با vaxis.viewWindow.min و vaxis.viewWindow.max اضافی است. مقادیر داده خارج از این مقادیر بریده می شوند. شما باید یک شی vAxis.viewWindow را تعیین کنید که حداکثر و حداقل مقادیر را برای نمایش توضیح دهد.
نوع: رشته
پیش فرض: معادل "زیبا" است، اما در صورت استفاده از vaxis.viewWindow.min و vaxis.viewWindow.max اولویت دارند.
vAxis.viewWindow

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

نوع: شی
پیش فرض: null
vAxis.viewWindow.max

حداکثر مقدار داده عمودی برای ارائه.

هنگامی که vAxis.viewWindowMode 'زیبا' یا 'بیشینه شده' است نادیده گرفته می شود.

نوع: شماره
پیش فرض: خودکار
vAxis.viewWindow.min

حداقل مقدار داده عمودی برای ارائه.

هنگامی که vAxis.viewWindowMode 'زیبا' یا 'بیشینه شده' است نادیده گرفته می شود.

نوع: شماره
پیش فرض: خودکار
عرض

عرض نمودار، بر حسب پیکسل.

نوع: شماره
پیش فرض: عرض عنصر حاوی

مواد و روش ها

روش
draw(data, options)

نمودار را رسم می کند. نمودار فراخوانی های متد بیشتر را فقط پس از فعال شدن رویداد ready می پذیرد. Extended description

نوع بازگشت: ندارد
getAction(actionID)

شی عمل راهنمای tooltip را با actionID درخواستی برمی گرداند.

نوع بازگشت: شی
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

ارتفاع منطقه نمودار
cli.getBoundingBox('chartarea').height
عرض میله سوم در سری اول نمودار میله ای یا ستونی
cli.getBoundingBox('bar#0#2').width
جعبه مرزی گوه پنجم نمودار دایره ای
cli.getBoundingBox('slice#4')
کادر مرزی داده های نمودار یک نمودار عمودی (مثلاً ستونی):
cli.getBoundingBox('vAxis#0#gridline')
کادر مرزی داده های نمودار یک نمودار افقی (مثلاً میله ای):
cli.getBoundingBox('hAxis#0#gridline')

مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید.

نوع بازگشت: شی
getChartAreaBoundingBox()

یک شی شامل سمت چپ، بالا، عرض و ارتفاع محتوای نمودار را برمی‌گرداند (یعنی به استثنای برچسب‌ها و افسانه‌ها):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

مقادیر نسبت به ظرف نمودار هستند. بعد از ترسیم نمودار این را صدا بزنید.

نوع بازگشت: شیء
getChartLayoutInterface()

یک شیء حاوی اطلاعاتی در مورد قرار دادن صفحه نمایش نمودار و عناصر آن را برمی گرداند.

روشهای زیر را می توان در مورد شیء برگشتی فراخوانی کرد:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

پس از ترسیم نمودار ، این را فراخوانی کنید.

نوع بازگشت: شیء
getHAxisValue(xPosition, optional_axis_index)

مقدار داده افقی را در xPosition باز می گرداند ، که یک جبران پیکسل از لبه سمت چپ کانتینر نمودار است. می تواند منفی باشد

مثال: chart.getChartLayoutInterface().getHAxisValue(400) .

پس از ترسیم نمودار ، این را فراخوانی کنید.

نوع بازگشت: شماره
getImageURI()

نمودار را به عنوان URI تصویر سریال می کند.

پس از ترسیم نمودار ، این را فراخوانی کنید.

نمودارهای چاپی PNG را مشاهده کنید.

نوع بازگشت: رشته
getSelection()

مجموعه ای از موجودات نمودار انتخاب شده را برمی گرداند. موجودات قابل انتخاب حباب هستند. برای این نمودار ، فقط یک موجود در هر لحظه می تواند انتخاب شود. Extended description

نوع بازگشت: آرایه ای از عناصر انتخابی
getVAxisValue(yPosition, optional_axis_index)

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

مثال: chart.getChartLayoutInterface().getVAxisValue(300) .

پس از ترسیم نمودار ، این را فراخوانی کنید.

نوع بازگشت: شماره
getXLocation(dataValue, optional_axis_index)

پیکسل X-هماهنگ dataValue را نسبت به لبه سمت چپ ظرف نمودار برمی گرداند.

مثال: chart.getChartLayoutInterface().getXLocation(400) .

پس از ترسیم نمودار ، این را فراخوانی کنید.

نوع بازگشت: شماره
getYLocation(dataValue, optional_axis_index)

پیکسل y هماهنگ dataValue را نسبت به لبه بالای ظرف نمودار برمی گرداند.

مثال: chart.getChartLayoutInterface().getYLocation(300) .

پس از ترسیم نمودار ، این را فراخوانی کنید.

نوع بازگشت: شماره
removeAction(actionID)

اقدامات Tooltip را با actionID درخواست شده از نمودار حذف می کند.

نوع بازگشت: none
setAction(action)

هنگامی که کاربر روی متن عمل کلیک می کند ، یک عمل ابزار ابزار را تنظیم می کند.

روش setAction یک شی را به عنوان پارامتر عمل خود می گیرد. این شی باید 3 ویژگی را مشخص کند: id - شناسه عمل در حال تنظیم ، text - متنی که باید در ابزار برای عمل و عمل ظاهر شود - action که باید هنگام کلیک کاربر روی متن عمل اجرا شود.

هرگونه اقدامات ابزار ابزار باید قبل از فراخوانی روش draw() نمودار تنظیم شود. توضیحات گسترده

نوع بازگشت: none
setSelection()

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

نوع بازگشت: ندارد
clearChart()

نمودار را پاک می کند و تمام منابع اختصاص داده شده آن را آزاد می کند.

نوع بازگشت: ندارد

مناسبت ها

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

نام
animationfinish

هنگامی که انیمیشن انتقال کامل است ، اخراج شد.

خواص: هیچ
click

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

خواص: TargetID
error

هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.

خواص: شناسه ، پیام
legendpagination

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

خواص: CurrentPageIndex ، TotalPages
onmouseover

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

خواص: ردیف ، ستون
onmouseout

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

خواص: ردیف ، ستون
ready

نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و پس از ترسیم روش‌ها را فراخوانی کنید، باید قبل از فراخوانی متد draw ، شنونده‌ای برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، آنها را فراخوانی کنید.

خواص: هیچ
select

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

خواص: هیچ

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.