نمودار میله

بررسی اجمالی

نمودارهای میله‌ای Google در مرورگر با استفاده از SVG یا VML ارائه می‌شوند، هر کدام که برای مرورگر کاربر مناسب است. مانند همه نمودارهای گوگل، نمودارهای میله ای نکات ابزار را زمانی که کاربر روی داده ها قرار می گیرد نمایش می دهد. برای نسخه عمودی این نمودار، نمودار ستونی را ببینید.

مثال ها

میله های رنگ آمیزی

بیایید چگالی چهار فلز گرانبها را نمودار کنیم:

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

سه روش مختلف برای انتخاب رنگ‌ها وجود دارد و جدول داده‌های ما همه آنها را نشان می‌دهد: مقادیر RGB، نام رنگ‌های انگلیسی و یک اعلان CSS مانند:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

سبک های نوار

نقش سبک به شما امکان می دهد چندین جنبه از ظاهر نوار را با اعلان های CSS مانند کنترل کنید:

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

ما توصیه نمی‌کنیم که سبک‌ها را خیلی آزادانه در نمودار ترکیب کنید - یک سبک را انتخاب کنید و به آن بچسبید - اما برای نشان دادن همه ویژگی‌های سبک، در اینجا یک نمونه وجود دارد:

دو نوار اول هر کدام از color خاصی استفاده می کنند (اولین با نام انگلیسی، دومی با مقدار RGB). هیچ opacity انتخاب نشد، بنابراین از پیش‌فرض 1.0 (کاملاً مات) استفاده می‌شود. به همین دلیل است که نوار دوم خط شبکه پشت آن را پنهان می کند. در نوار سوم، opacity 0.2 استفاده شده است که خط شبکه را آشکار می کند. در نوار چهارم، از سه ویژگی style استفاده شده است: stroke-color و stroke-width برای ترسیم حاشیه و fill-color برای تعیین رنگ مستطیل داخل. سمت راست ترین نوار علاوه بر این، از stroke-opacity و تیرگی fill-opacity برای انتخاب کدورت ها برای حاشیه و پر کردن استفاده می کند:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

میله های برچسب گذاری

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

فرض کنید می خواستیم هر نوار را با نماد شیمیایی مناسب حاشیه نویسی کنیم. ما می توانیم این کار را با نقش حاشیه نویسی انجام دهیم:

در جدول داده‌های خود، یک ستون جدید با { role: 'annotation' } برای نگه داشتن برچسب‌های نوار تعریف می‌کنیم:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

در حالی که کاربران می‌توانند روی نوارها حرکت کنند تا مقادیر داده‌ها را ببینند، ممکن است بخواهید آنها را در خود نوارها قرار دهید:

این کمی پیچیده‌تر از آن چیزی است که باید باشد، زیرا ما یک DataView ایجاد می‌کنیم تا حاشیه‌نویسی را برای هر نوار مشخص کنیم.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

اگر بخواهیم مقدار را به شکل دیگری فرمت کنیم، می‌توانیم یک قالب‌کننده تعریف کنیم و آن را در تابعی مانند این بپیچیم:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

سپس می‌توانیم آن را با calc: getValueAt.bind(undefined, 1) .

اگر برچسب خیلی بزرگ باشد که به طور کامل در نوار قرار نگیرد، در خارج نمایش داده می شود:

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

نمودار میله ای انباشته یک نمودار میله ای است که مقادیر مرتبط را بالای یکدیگر قرار می دهد. اگر مقادیر منفی وجود داشته باشد، آنها به ترتیب معکوس در زیر خط مبنا محور نمودار قرار می گیرند. نمودارهای میله ای انباشته معمولاً زمانی استفاده می شوند که یک دسته به طور طبیعی به مؤلفه ها تقسیم شود. به عنوان مثال، برخی از فروش های کتاب فرضی را که بر اساس ژانر تقسیم شده و در طول زمان مقایسه شده اند، در نظر بگیرید:

با تنظیم گزینه isStacked روی true ، یک نمودار میله ای انباشته ایجاد می کنید:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

نمودارهای میله ای انباشته نیز از انباشته شدن 100% پشتیبانی می کنند، که در آن پشته های عناصر در هر مقدار دامنه تغییر مقیاس داده می شوند به طوری که مجموع آنها به 100% می رسد. گزینه‌های مربوط به آن isStacked: 'percent' هستند که هر مقدار را به صورت درصد 100% فرمت می‌کند و isStacked: 'relative' که هر مقدار را به صورت کسری از 1 قالب‌بندی می‌کند. گزینه isStacked: 'absolute' نیز وجود دارد. که از نظر عملکردی معادل isStacked: true .

توجه داشته باشید که در نمودار 100% انباشته در سمت راست، مقادیر تیک بر اساس مقیاس نسبی 0-1 به عنوان کسری از 1 است، اما مقادیر محورها به صورت درصد نمایش داده می شوند. این به این دلیل است که تیک‌های محور درصد نتیجه اعمال فرمت "#.##%" به مقادیر نسبی مقیاس 0-1 است. هنگام استفاده از isStacked: 'percent' ، مطمئن شوید که هر تیکی را با استفاده از مقیاس نسبی 0-1 مشخص کنید.

انباشته
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100٪ روی هم چیده شده است
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

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

در سال 2014، گوگل دستورالعمل‌هایی را برای پشتیبانی از ظاهر و احساس مشترک در ویژگی‌ها و برنامه‌های خود (مانند برنامه‌های اندروید) که بر روی پلتفرم‌های Google اجرا می‌شوند، اعلام کرد. ما این تلاش را طراحی مواد می نامیم. ما نسخه‌های "ماده" تمام نمودارهای اصلی خود را ارائه خواهیم کرد. اگر از ظاهر آنها خوشتان می آید، می توانید از آنها استفاده کنید.

ایجاد یک نمودار نواری مواد مشابه ایجاد چیزی است که اکنون آن را نمودار نواری "کلاسیک" می نامیم. شما Google Visualization API را بارگیری می‌کنید (اگرچه با بسته 'bar' به جای بسته اصلی نمودار)، 'corechart' خود را تعریف می‌کنید و سپس یک شی ایجاد می‌کنید (اما از کلاس google.charts.Bar به جای google.visualization.BarChart ).

توجه: نمودارهای مواد در نسخه های قدیمی اینترنت اکسپلورر کار نمی کنند. (IE8 و نسخه‌های قبلی از SVG پشتیبانی نمی‌کنند، که نمودارهای مواد به آن نیاز دارند.)

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

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

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

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

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

chart.draw(data, options);

...با این:

chart.draw(data, google.charts.Bar.convertOptions(options));

استفاده از google.charts.Bar.convertOptions() به شما امکان می دهد از ویژگی های خاصی مانند گزینه های از پیش تعیین شده hAxis/vAxis.format استفاده کنید.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <br/> <div id="btn-group"> <button class="button button-blue" id="none">No Format</button> <button class="button button-blue" id="scientific">Scientific Notation</button> <button class="button button-blue" id="decimal">Decimal</button> <button class="button button-blue" id="short">Short</button> </div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal', // Required for Material Bar Charts. hAxis: {format: 'decimal'}, height: 400, colors: ['#1b9e77', '#d95f02', '#7570b3'] }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); var btns = document.getElementById('btn-group'); btns.onclick = function (e) { if (e.target.tagName === 'BUTTON') { options.hAxis.format = e.target.id === 'none' ? '' : e.target.id; chart.draw(data, google.charts.Bar.convertOptions(options)); } } } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <br/> <div id="btn-group"> <button class="button button-blue" id="none">No Format</button> <button class="button button-blue" id="scientific">Scientific Notation</button> <button class="button button-blue" id="decimal">Decimal</button> <button class="button button-blue" id="short">Short</button> </div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal', // Required for Material Bar Charts. hAxis: {format: 'decimal'}, height: 400, colors: ['#1b9e77', '#d95f02', '#7570b3'] }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); var btns = document.getElementById('btn-group'); btns.onclick = function (e) { if (e.target.tagName === 'BUTTON') { options.hAxis.format = e.target.id === 'none' ? '' : e.target.id; chart.draw(data, google.charts.Bar.convertOptions(options)); } } }

نمودارهای Dual-X

توجه: محورهای دوگانه X فقط برای نمودارهای مواد (یعنی آنهایی که bar بسته دارند) در دسترس هستند.

گاهی اوقات می خواهید دو سری را در نمودار میله ای با دو محور x مستقل نمایش دهید: یک محور بالا برای یک سری و یک محور پایین برای سری دیگر:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); };

توجه داشته باشید که نه تنها دو محور x ما به طور متفاوتی برچسب گذاری شده اند ("پارسک" در مقابل "قدر ظاهری") بلکه هر کدام مقیاس ها و خطوط شبکه مستقل خود را دارند. اگر می خواهید این رفتار را سفارشی کنید، از گزینه های hAxis.gridlines استفاده کنید.

در کد زیر گزینه های axes و series با هم ظاهر dual-X نمودار را مشخص می کنند. گزینه series مشخص می کند که از کدام محور برای هر کدام استفاده شود ( 'distance' و 'brightness' ؛ آنها نیازی به هیچ ارتباطی با نام ستون ها در جدول داده ندارند). سپس گزینه axes این نمودار را به یک نمودار دوگانه X تبدیل می کند و محور 'apparent magnitude' را در بالا و محور 'parsecs' را در پایین قرار می دهد.

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

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

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

توجه: محورهای Top-X فقط برای نمودارهای مواد (یعنی آنهایی که bar بسته دارند) در دسترس هستند.

اگر می‌خواهید برچسب‌ها و عنوان محور X را به جای پایین، در بالای نمودار خود قرار دهید، می‌توانید این کار را در نمودارهای Material با گزینه axes.x :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="top_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="top_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); };

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

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

بارگذاری

نام بسته google.charts.load "corechart" است. نام کلاس تجسم google.visualization.BarChart است.

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

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

برای نمودارهای نوار مواد، نام بسته google.charts.load "bar" است. نام کلاس تجسم google.charts.Bar است.

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

  var chart = new google.charts.Bar(container);

فرمت داده

ردیف ها: هر ردیف در جدول نشان دهنده گروهی از میله ها است.

ستون ها:

ستون 0 ستون 1 ... ستون N
هدف: مقادیر نوار 1 در این گروه ... مقادیر نوار N در این گروه
نوع داده: عدد ... عدد
نقش: دامنه داده ها ... داده ها
نقش های ستون اختیاری: ...

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

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

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

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

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

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

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

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

در نمودارهای میله و ستون ، اگر روی true تنظیم شود، تمام حاشیه نویسی ها خارج از نوار/ستون ترسیم می شود.

نوع: بولی
پیش فرض: نادرست
annotations.datum
برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.datum به شما امکان می دهد انتخاب نمودارهای Google را برای حاشیه نویسی های ارائه شده برای عناصر داده جداگانه (مانند مقادیر نمایش داده شده با هر نوار در نمودار میله ای) لغو کنید. می‌توانید رنگ را با annotations.datum.stem.color ، طول ساقه را با annotations.datum.stem.length ، و سبک را با annotations.datum.style کنترل کنید.
نوع: شی
پیش فرض: رنگ "سیاه" است. طول 12 است. سبک "نقطه" است.
حاشیه نویسی. دامنه
برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.domain به شما امکان می دهد انتخاب نمودارهای Google برای حاشیه نویسی ارائه شده برای یک دامنه (محور اصلی نمودار، مانند محور X در نمودار خطی معمولی) را نادیده بگیرید. می‌توانید رنگ را با annotations.domain.stem.color ، طول ساقه را با annotations.domain.stem.length و سبک را با annotations.domain.style کنترل کنید.
نوع: شی
پیش فرض: رنگ "سیاه" است. طول 5 است. سبک "نقطه" است.
annotations.boxStyle

برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.boxStyle ظاهر کادرهای اطراف حاشیه نویسی را کنترل می کند:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

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

نوع: شی
پیش فرض: null
annotations.highContrast
برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، annotations.highContrast به شما امکان می دهد انتخاب رنگ حاشیه annotations.highContrast توسط نمودارهای Google را نادیده بگیرید. به‌طور پیش‌فرض، annotations.highContrast درست است، که باعث می‌شود نمودارها یک رنگ حاشیه‌نویسی با کنتراست خوب انتخاب کنند: رنگ‌های روشن در پس‌زمینه‌های تیره و تیره در روشن. اگر annotations.highContrast را روی false تنظیم کنید و رنگ حاشیه نویسی خود را مشخص نکنید، Google Charts از رنگ سری پیش‌فرض برای حاشیه‌نویسی استفاده می‌کند:
نوع: بولی
پیش فرض: درست است
annotations.stem
برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.stem به شما امکان می دهد انتخاب نمودارهای Google برای سبک پایه را نادیده بگیرید. می توانید رنگ را با annotations.stem.color و طول ساقه را با annotations.stem.length کنترل کنید. توجه داشته باشید که گزینه طول پایه هیچ تاثیری بر حاشیه نویسی با سبک 'line' ندارد: برای حاشیه نویسی های مبدأ 'line' ، طول پایه همیشه با متن یکسان است و برای حاشیه نویسی دامنه 'line' ، ساقه در کل نمودار گسترش می یابد. .
نوع: شی
پیش فرض: رنگ "سیاه" است. طول برای حاشیه نویسی دامنه 5 و برای حاشیه نویسی مبدأ 12 است.
حاشیه نویسی.سبک
برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، گزینه annotations.style به شما امکان می دهد انتخاب نوع حاشیه نویسی نمودارهای Google را لغو کنید. می تواند 'line' یا 'point' باشد.
نوع: رشته
پیش فرض: "نقطه"
annotations.textStyle
برای نمودارهایی که از حاشیه نویسی پشتیبانی می کنند، شی annotations.textStyle ظاهر متن حاشیه نویسی را کنترل می کند:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

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

نوع: شی
پیش فرض: null
axisTitlesPosition

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

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

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

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

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

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

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

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

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

نوع: رشته
پیش فرض: "سفید"
bar.groupWidth
عرض گروهی از نوارها که در هر یک از این قالب‌ها مشخص شده است:
  • پیکسل (مثلا 50).
  • درصد عرض موجود برای هر گروه (به عنوان مثال "20٪")، که در آن "100٪" به این معنی است که گروه ها هیچ فاصله ای بین آنها ندارند.
نوع: عدد یا رشته
پیش فرض: نسبت طلایی ، تقریباً '61.8٪'.
میله ها

این که آیا میله‌ها در نمودار نوار مواد عمودی یا افقی هستند. این گزینه روی نمودارهای نواری کلاسیک یا نمودارهای ستونی کلاسیک تأثیری ندارد.

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

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

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

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

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

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

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

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

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

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

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

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

نوع: رشته
پیش فرض: null
نمودار. عنوان

برای نمودارهای مواد ، این گزینه عنوان را مشخص می کند.

نوع: رشته
پیش فرض: null
رنگ ها

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

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

شفافیت نقاط داده، با 1.0 کاملاً غیر شفاف و 0.0 کاملاً شفاف. در نمودارهای پراکندگی، هیستوگرام، میله ای و ستونی، این به داده های قابل مشاهده اشاره دارد: نقاط در نمودار پراکندگی و مستطیل ها در بقیه. در نمودارهایی که انتخاب داده‌ها یک نقطه ایجاد می‌کند، مانند نمودارهای خط و ناحیه، این به دایره‌هایی اطلاق می‌شود که هنگام شناور یا انتخاب ظاهر می‌شوند. نمودار ترکیبی هر دو رفتار را نشان می دهد و این گزینه روی نمودارهای دیگر تأثیری ندارد. (برای تغییر کدورت خط روند، کدورت خط روند را ببینید.)

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

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

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

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

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

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

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

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

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

نوع موجودی که فوکوس را روی شناور ماوس دریافت می کند. همچنین تأثیر می گذارد که کدام موجودیت با کلیک ماوس انتخاب می شود و کدام عنصر جدول داده با رویدادها مرتبط است. می تواند یکی از موارد زیر باشد:

  • 'datum' - روی یک نقطه داده واحد تمرکز کنید. با یک سلول در جدول داده ها ارتباط دارد.
  • 'دسته' - بر گروه بندی تمام نقاط داده در امتداد محور اصلی تمرکز کنید. با یک ردیف در جدول داده ها ارتباط دارد.

در focusTarget 'category'، راهنمای ابزار تمام مقادیر دسته را نمایش می دهد. این ممکن است برای مقایسه مقادیر سری های مختلف مفید باشد.

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

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

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

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

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

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

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

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

برای تعیین نموداری با چندین محور افقی، ابتدا یک محور جدید با استفاده از series.targetAxisIndex ، سپس با استفاده از hAxes محور را پیکربندی کنید. مثال زیر سری 1 را به محور پایین اختصاص می دهد و یک عنوان سفارشی و سبک متن را برای آن مشخص می کند:

series:{1:{targetAxisIndex:1{% raw %}}}{% endraw %}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'{% raw %}}}{% endraw %}}

این ویژگی می تواند یک شی یا یک آرایه باشد: شی مجموعه ای از اشیاء است که هر کدام دارای یک برچسب عددی است که محوری را که تعریف می کند مشخص می کند - این قالبی است که در بالا نشان داده شده است. آرایه آرایه ای از اشیا است، یکی در هر محور. به عنوان مثال، نماد آرایه زیر با شی hAxis نشان داده شده در بالا یکسان است:

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
نوع: آرایه شی یا شی با اشیاء فرزند
پیش فرض: null
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.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.textPosition

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

نوع: رشته
پیش فرض: "خارج"
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 'زیبا' یا 'بیشینه شده' است نادیده گرفته می شود.

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

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

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

اگر روی true تنظیم شود، عناصر را برای همه سری ها در هر مقدار دامنه پشته می کند. توجه: در نمودارهای Column ، Area و StepppedArea ، نمودارهای Google ترتیب آیتم‌های افسانه‌ای را برعکس می‌کند تا با چیدمان عناصر سری مطابقت بیشتری داشته باشد (مثلاً سری 0 پایین‌ترین مورد افسانه‌ای خواهد بود). این در مورد نمودار میله ای صدق نمی کند .

گزینه isStacked همچنین از انباشته شدن 100% پشتیبانی می کند، که در آن پشته های عناصر در هر مقدار دامنه تغییر مقیاس داده می شوند تا به 100% اضافه شوند.

گزینه های isStacked عبارتند از:

  • false - عناصر روی هم چیده نمی شوند. این گزینه ی پیش فرض می باشد.
  • true - عناصر را برای همه سری ها در هر مقدار دامنه پشته می کند.
  • 'percent' - عناصر را برای همه سری ها در هر مقدار دامنه روی هم می چیند و آنها را طوری تغییر می دهد که تا 100% جمع شوند و مقدار هر عنصر به صورت درصدی 100% محاسبه شود.
  • 'relative' - عناصر را برای همه سری ها در هر مقدار دامنه روی هم قرار می دهد و آنها را به گونه ای تغییر می دهد که جمع آنها به 1 برسد و مقدار هر عنصر به عنوان کسری از 1 محاسبه شود.
  • 'absolute' - عملکردی مشابه isStacked: true .

برای انباشته شدن 100%، مقدار محاسبه شده برای هر عنصر پس از مقدار واقعی آن در راهنمای ابزار ظاهر می شود.

محور هدف به‌طور پیش‌فرض مقادیر را بر اساس مقیاس نسبی 0-1 به عنوان کسرهای 1 برای 'relative' و 0-100 درصد برای 'percent' تیک می‌دهد ( توجه: هنگام استفاده از گزینه 'percent' ، مقادیر محور/تیک به عنوان درصد نمایش داده می شوند، اما مقادیر واقعی مقادیر نسبی مقیاس 0-1 هستند. این به این دلیل است که تیک های محور درصد نتیجه اعمال قالب "#.##%" به مقادیر نسبی مقیاس 0-1 هستند. با استفاده از isStacked: 'percent' ، مطمئن شوید که هر تیک/خط مشبک را با استفاده از مقادیر نسبی مقیاس 0-1 مشخص کنید. شما می توانید خطوط شبکه / مقادیر تیک و قالب بندی را با استفاده از گزینه های مناسب hAxis/vAxis کنید.

انباشته شدن 100% فقط از مقادیر داده نوع number پشتیبانی می کند و باید خط پایه صفر داشته باشد.

نوع: boolean/string
پیش فرض: نادرست
افسانه

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
نوع: شی
پیش فرض: null
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>}
معکوس دسته ها

اگر روی true تنظیم شود، سری ها را از پایین به بالا ترسیم می کند. پیش فرض این است که از بالا به پایین بکشید.

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

جهت گیری نمودار. وقتی روی 'vertical' تنظیم می شود، محورهای نمودار را می چرخاند تا (به عنوان مثال) نمودار ستونی به نمودار میله ای تبدیل شود و نمودار ناحیه به جای بالا به سمت راست رشد کند:

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

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

  • annotations - شیئی که باید در حاشیه نویسی های این سری اعمال شود. این را می توان برای کنترل، به عنوان مثال، textStyle برای سری استفاده کرد:

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    گزینه های مختلف annotations را برای لیست کامل تری از مواردی که می توان سفارشی کرد، مشاهده کنید.

  • color - رنگی که برای این سری استفاده می شود. یک رشته رنگ معتبر HTML را مشخص کنید.
  • labelInLegend - شرح سری برای نمایش در افسانه نمودار.
  • targetAxisIndex - این سری را به کدام محور اختصاص دهیم، که در آن 0 محور پیش‌فرض و 1 محور مقابل است. مقدار پیش فرض 0 است. برای تعریف نموداری که در آن سری های مختلف بر اساس محورهای مختلف ارائه می شوند، روی 1 تنظیم کنید. حداقل یک سری به محور پیش فرض اختصاص داده شود. شما می توانید مقیاس متفاوتی را برای محورهای مختلف تعریف کنید.
  • visibleInLegend - یک مقدار بولی، که در آن true به این معنی است که سری باید یک ورودی افسانه داشته باشد و false به این معنی است که نباید. پیش فرض درست است.

می‌توانید آرایه‌ای از اشیاء را مشخص کنید که هر کدام به ترتیب داده‌شده برای سری اعمال می‌شوند، یا می‌توانید شی‌ای را مشخص کنید که در آن هر فرزند یک کلید عددی داشته باشد که نشان می‌دهد برای کدام سری اعمال می‌شود. به عنوان مثال، دو اعلان زیر یکسان هستند و سری اول را سیاه و غایب از افسانه، و چهارم را قرمز و غایب از افسانه اعلام می‌کنند:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
نوع: آرایه ای از اشیاء یا شی با اشیاء تودرتو
پیش فرض: {}
موضوع

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

  • '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.ignoreBounds

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

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

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

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

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

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

اگر درست است، مربع های رنگی را در کنار اطلاعات سری در راهنمای ابزار نشان دهید. پیش‌فرض زمانی درست است که focusTarget روی «دسته» تنظیم شده باشد، در غیر این صورت پیش‌فرض نادرست است.

نوع: بولی
پیش فرض: خودکار
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' - راهنمای ابزار نمایش داده نخواهد شد.
  • 'انتخاب' - وقتی کاربر عنصر را انتخاب می کند، راهنمای ابزار نمایش داده می شود.
نوع: رشته
پیش فرض: "تمرکز"
خطوط روند

خطوط روند را در نمودارهایی که از آنها پشتیبانی می کنند نشان می دهد. به طور پیش فرض، خط روند خطی استفاده می شود، اما می توان آن را با خطوط trendlines. n .type گزینه trendlines. n .type .

خطوط روند بر اساس هر سری مشخص می‌شوند، بنابراین در اکثر مواقع گزینه‌های شما به این شکل خواهند بود:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
نوع: شی
پیش فرض: null
trendlines.n.color

رنگ خط روند که به عنوان یک نام رنگ انگلیسی یا یک رشته هگز بیان می شود.

نوع: رشته
پیش‌فرض: رنگ سری پیش‌فرض
trendlines.n.degree

برای خطوط روند از type: 'polynomial' ، درجه چند جمله ای ( 2 برای درجه دوم، 3 برای مکعب، و غیره). (مدرک پیش فرض ممکن است از 3 به 2 در نسخه بعدی نمودارهای Google تغییر کند.)

نوع: شماره
پیش فرض: 3
trendlines.n.labelInLegend

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

نوع: رشته
پیش فرض: null
trendlines.n.lineWidth

عرض خط خط روند ، بر حسب پیکسل.

نوع: شماره
پیش فرض: 2
خط روند.n.تاری

شفافیت خط روند ، از 0.0 (شفاف) تا 1.0 (مادر).

نوع: شماره
پیش فرض: 1.0
trendlines.n.pointSize

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

نوع: شماره
پیش فرض: 1
trendlines.n.pointsVisible

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

نوع: بولی
پیش فرض: درست است
trendlines.n.showR2

آیا برای نشان دادن ضریب تعیین در افسانه یا راهنمای ابزار خط روند.

نوع: بولی
پیش فرض: نادرست
trendlines.n.type

خطوط روند 'linear' (پیش‌فرض)، 'exponential' یا 'polynomial' باشد.

نوع: رشته
پیش فرض: خطی
trendlines.n.visibleInLegend

آیا معادله خط روند در افسانه ظاهر می شود یا خیر. (در راهنمای ابزار خط روند ظاهر می شود.)

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

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

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

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

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

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

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

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

نوع: شماره
پیش فرض: "سیاه"
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 میلیون)

برای برچسب‌های محور تاریخ، این زیرمجموعه‌ای از مجموعه الگوی ICU قالب‌بندی تاریخ است. برای مثال، {format:'MMM d, y'} مقدار "1 ژوئیه 2011" را برای تاریخ اول ژوئیه 2011 نمایش می دهد.

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

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

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

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

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

{color: '#333', minSpacing: 20}

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

نوع: شی
پیش فرض: 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.

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

نوع: شی
پیش فرض: 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

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

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

نوع: بولی
پیش فرض: نادرست
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] }

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

نوع: آرایه ای از عناصر
پیش فرض: خودکار
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 این ویژگی را لغو می کند.

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

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

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

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

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

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

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

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

نوع: رشته
پیش فرض: معادل "زیبا" است، اما در صورت استفاده از vaxis.viewWindow.min و vaxis.viewWindow.max اولویت دارند.
vAxis.viewWindow

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

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

  • برای یک محور continuous :

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

  • برای یک محور discrete :

    شاخص ردیف مبتنی بر صفر که در آن پنجره برش به پایان می رسد. نقاط داده در این شاخص و بالاتر حذف خواهند شد. در ارتباط با vAxis.viewWindowMode.min ، یک محدوده نیمه باز [min، max) را تعریف می کند که نشان دهنده شاخص های عنصر برای نمایش است. به عبارت دیگر، هر شاخص به گونه ای که min <= index < max نمایش داده می شود.

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

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

  • برای یک محور continuous :

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

  • برای یک محور discrete :

    شاخص ردیف مبتنی بر صفر که در آن پنجره برش شروع می شود. نقاط داده در شاخص های پایین تر از این برش داده می شوند. در ارتباط با vAxis.viewWindowMode.max ، یک محدوده نیمه باز [min, max) تعریف می کند که نشان دهنده شاخص های عنصر برای نمایش است. به عبارت دیگر، هر شاخص به گونه ای که min <= index < max نمایش داده می شود. هنگامی که vAxis.viewWindowMode 'زیبا' یا 'بیشینه شده' است نادیده گرفته می شود.

هنگامی که 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)

عملکرد راهنمای ابزار با actionID درخواستی را از نمودار حذف می کند.

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

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

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

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

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

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

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

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

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

مناسبت ها

برای اطلاعات بیشتر در مورد نحوه استفاده از این رویدادها، به Basic Interactivity ، Handling Events و Firing Events مراجعه کنید.

نام
animationfinish

هنگامی که انیمیشن انتقال کامل شد فعال می شود.

خواص: هیچ
click

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

ویژگی ها: targetID
error

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

ویژگی ها: شناسه، پیام
legendpagination

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

ویژگی ها: currentPageIndex، totalPages
onmouseover

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

خواص: سطر، ستون
onmouseout

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

خواص: سطر، ستون
ready

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

خواص: هیچ
select

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

خواص: هیچ

خط مشی داده

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