تجسم: نمودار پراکندگی

بررسی اجمالی

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

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

مثال

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_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':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

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

تغییر و متحرک سازی اشکال

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

مانند اکثر نمودارهای Google دیگر، می‌توانید با استفاده از رویدادها آن‌ها را متحرک کنید. می توانید برای اولین رویداد ready شنونده رویداد اضافه کنید و پس از انجام تغییرات مورد نظر نمودار را دوباره ترسیم کنید. پس از اولین رویداد ready ، می توانید به رویداد animationfinish گوش دهید تا روند تکرار شود و در نتیجه یک انیمیشن پیوسته ایجاد شود. گزینه animation نحوه انجام دوباره ترسیم را کنترل می کند: بلافاصله (بدون انیمیشن) یا به آرامی، و اگر هموار باشد با چه سرعتی و با چه رفتاری.

قطعات خوب
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
HTML کامل
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

ایجاد نمودارهای پراکندگی مواد

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

ایجاد نمودار پراکندگی مواد شبیه به ایجاد چیزی است که اکنون آن را نمودار پراکندگی «کلاسیک» می نامیم. شما Google Visualization API را بارگیری می‌کنید (اگرچه با بسته 'scatter' به جای بسته 'corechart' )، جدول داده‌تان را تعریف می‌کنید و سپس یک شی ایجاد می‌کنید (اما از کلاس google.charts.Scatter به جای google.visualization.ScatterChart ).

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatterchart_material"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatterchart_material"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }

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

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

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

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

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

chart.draw(data, options);

...با این:

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

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

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };

توجه داشته باشید که نه تنها دو محور y ما دارای برچسب متفاوتی هستند ("نمره امتحان نهایی" در مقابل "ساعت های مطالعه شده") بلکه هر کدام مقیاس ها و خطوط شبکه مستقل خود را دارند. اگر می خواهید این رفتار را سفارشی کنید، از گزینه های vAxis.gridlines استفاده کنید.

در کد زیر گزینه های axes و series با هم ظاهر دوگانه Y نمودار را مشخص می کنند. گزینه series مشخص می کند که از کدام محور برای هر کدام استفاده شود ( 'final grade' و 'hours studied' ؛ آنها نیازی به هیچ ارتباطی با نام ستون ها در جدول داده ندارند). سپس گزینه axes این نمودار را به نمودار Y دوگانه تبدیل می‌کند و محور 'Final Exam Grade' را در سمت چپ و محور 'Hours Studied' را در سمت راست قرار می‌دهد.

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

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

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

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter_top_x"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter_top_x"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

بارگذاری

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

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

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

برای نمودارهای پراکندگی مواد، نام بسته google.charts.load "scatter" است و نام کلاس تجسم google.charts.Scatter است.

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

  var visualization = new google.charts.Scatter(container);

فرمت داده

سطرها: هر ردیف در جدول مجموعه ای از نقاط داده را با همان مقدار محور x نشان می دهد.

ستون ها:

ستون 0 ستون 1 ... ستون N
هدف: مقادیر نقطه داده X مقادیر Y سری 1 ... مقادیر سری N Y
نوع داده: رشته، شماره، یا تاریخ/تاریخ/زمان روز رشته، شماره، یا تاریخ/تاریخ/زمان روز ... رشته، شماره، یا تاریخ/تاریخ/زمان روز
نقش: داده ها داده ها ... داده ها
نقش های ستون اختیاری:

هیچ یک

 ...

برای تعیین چند سری، دو یا چند ستون محور Y را مشخص کنید و مقادیر Y را فقط در یک ستون Y مشخص کنید:

مقادیر X سری 1 مقادیر Y سری 2 مقادیر Y
10 خالی 75
20 خالی 18
33 خالی 22
55 16 خالی
14 61 خالی
48 3 خالی

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

نام
تجمع هدف
چگونه چندین انتخاب داده در راهنمای ابزار جمع می شوند:
  • 'category' : داده های انتخاب شده را بر اساس x-value گروه بندی کنید.
  • 'series' : داده های انتخاب شده را بر اساس سری گروه بندی کنید.
  • 'auto' : اگر همه انتخاب‌ها دارای مقدار x یکسان باشند، داده‌های انتخاب‌شده را بر اساس x-value گروه‌بندی کنید، و در غیر این صورت براساس سری.
  • 'none' : در هر انتخاب فقط یک نکته ابزار نمایش داده شود.
aggregationTarget اغلب همراه با selectionMode و tooltip.trigger استفاده می شود، به عنوان مثال:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
نوع: رشته
پیش فرض: "خودکار"
انیمیشن.مدت

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یک شی حاوی ویژگی های متقاطع برای نمودار.

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

رنگ متقاطع، که به صورت نام رنگ (مثلاً "آبی") یا یک مقدار RGB (مثلاً "#adf") بیان می شود.

نوع: رشته
نوع: پیش فرض
متقاطع.متمرکز

یک شی حاوی ویژگی های متقاطع هنگام فوکوس.
مثال: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

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

تیرگی متقاطع، با 0.0 کاملاً شفاف و 1.0 کاملاً مات.

نوع: شماره
پیش فرض: 1.0
متقابل. جهت گیری

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

نوع: رشته
پیش فرض: "هر دو"
متقاطع.انتخاب شد

یک شی حاوی ویژگی های متقاطع پس از انتخاب.
مثال: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

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

زمان نمایش خطوط متقاطع: روی 'focus' ، 'selection' یا 'both' .

نوع: رشته
پیش فرض: "هر دو"
curveType

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

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

شفافیت نقاط داده، با 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
اندازه فونت

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

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

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

نوع: رشته
پیش فرض: "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>}
عرض خط

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

نوع: شماره
پیش فرض: 0
گرایش

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

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

شکل تک تک عناصر داده: «دایره»، «مثلث»، «مربع»، «الماس»، «ستاره» یا «چند ضلعی». برای مثال به مستندات امتیاز مراجعه کنید.

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

قطر نقاط داده، بر حسب پیکسل. از صفر برای پنهان کردن تمام نقاط استفاده کنید. با استفاده از ویژگی series می توانید مقادیر را برای سری های جداگانه لغو کنید. اگر از خط روند استفاده می کنید، این گزینه بر روی pointSize نقاط تشکیل دهنده آن نیز تأثیر می گذارد که عرض ظاهری خط روند را تغییر می دهد. برای جلوگیری از این امر، می توانید آن را با گزینه trendlines.n.pointsize لغو کنید.

نوع: شماره
پیش فرض: 7
نقاط قابل مشاهده

تعیین می کند که آیا نقاط نمایش داده می شوند یا خیر. برای پنهان کردن تمام نقاط، روی false تنظیم کنید. با استفاده از ویژگی series می توانید مقادیر را برای سری های جداگانه لغو کنید. اگر از خط روند استفاده می‌کنید، گزینه pointsVisible روی دید نقاط روی همه خطوط روند تأثیر می‌گذارد، مگر اینکه آن را با گزینه trendlines.n.pointsVisible لغو کنید.

این را می توان با استفاده از نقش سبک به شکل "point {visible: true}" لغو کرد.

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

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

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

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

  • color - رنگی که برای این سری استفاده می شود. یک رشته رنگ معتبر HTML را مشخص کنید.
  • labelInLegend - شرح سری برای نمایش در افسانه نمودار.
  • lineWidth - مقدار lineWidth جهانی را برای این سری لغو می کند.
  • pointShape - مقدار سراسری pointShape را برای این سری لغو می کند.
  • pointSize - مقدار جهانی pointSize را برای این سری لغو می کند.
  • pointsVisible - مقدار جهانی pointsVisible را برای این سری لغو می کند.
  • 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

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

Type: boolean
Default: false
tooltip.textStyle

An object that specifies the tooltip text style. The object has this format:

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

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

The user interaction that causes the tooltip to be displayed:

  • 'focus' - The tooltip will be displayed when the user hovers over the element.
  • 'none' - The tooltip will not be displayed.
  • 'selection' - The tooltip will be displayed when the user selects the element.
Type: string
Default: 'focus'
trendlines

Displays trendlines on the charts that support them. By default, linear trendlines are used, but this can be customized with the trendlines. n .type option.

Trendlines are specified on a per-series basis, so most of the time your options will look like this:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Type: object
Default: null
trendlines.n.color

The color of the trendline , expressed as either an English color name or a hex string.

Type: string
Default: default series color
trendlines.n.degree

For trendlines of type: 'polynomial' , the degree of the polynomial ( 2 for quadratic, 3 for cubic, and so on). (The default degree may change from 3 to 2 in an upcoming release of Google Charts.)

Type: number
Default: 3
trendlines.n.labelInLegend

If set, the trendline will appear in the legend as this string.

Type: string
Default: null
trendlines.n.lineWidth

The line width of the trendline , in pixels.

Type: number
Default: 2
trendlines.n.opacity

The transparency of the trendline , from 0.0 (transparent) to 1.0 (opaque).

Type: number
Default: 1.0
trendlines.n.pointSize

Trendlines are constucted by stamping a bunch of dots on the chart; this rarely-needed option lets you customize the size of the dots. The trendline's lineWidth option will usually be preferable. However, you'll need this option if you're using the global pointSize option and want a different point size for your trendlines.

Type: number
Default: 1
trendlines.n.pointsVisible

Trendlines are constucted by stamping a bunch of dots on the chart. The trendline's pointsVisible option determines whether the points for a particular trendline are visible.

Type: boolean
Default: true
trendlines.n.showR2

Whether to show the coefficient of determination in the legend or trendline tooltip.

Type: boolean
Default: false
trendlines.n.type

Whether the trendlines is 'linear' (the default), 'exponential' , or 'polynomial' .

Type: string
Default: linear
trendlines.n.visibleInLegend

Whether the trendline equation appears in the legend. (It will appear in the trendline tooltip.)

Type: boolean
Default: false
vAxis

An object with members to configure various vertical axis elements. To specify properties of this object, you can use object literal notation, as shown here:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Type: object
Default: null
vAxis.baseline

vAxis property that specifies the baseline for the vertical axis. If the baseline is larger than the highest grid line or smaller than the lowest grid line, it will be rounded to the closest gridline.

Type: number
Default: automatic
vAxis.baselineColor

Specifies the color of the baseline for the vertical axis. Can be any HTML color string, for example: 'red' or '#00cc00' .

Type: number
Default: 'black'
vAxis.direction

The direction in which the values along the vertical axis grow. By default, low values are on the bottom of the chart. Specify -1 to reverse the order of the values.

Type: 1 or -1
Default: 1
vAxis.format

A format string for numeric axis labels. This is a subset of the ICU pattern set . For instance, {format:'#,###%'} will display values "1,000%", "750%", and "50%" for values 10, 7.5, and 0.5. You can also supply any of the following:

  • {format: 'none'} : displays numbers with no formatting (eg, 8000000)
  • {format: 'decimal'} : displays numbers with thousands separators (eg, 8,000,000)
  • {format: 'scientific'} : displays numbers in scientific notation (eg, 8e6)
  • {format: 'currency'} : displays numbers in the local currency (eg, $8,000,000.00)
  • {format: 'percent'} : displays numbers as percentages (eg, 800,000,000%)
  • {format: 'short'} : displays abbreviated numbers (eg, 8M)
  • {format: 'long'} : displays numbers as full words (eg, 8 million)

The actual formatting applied to the label is derived from the locale the API has been loaded with. For more details, see loading charts with a specific locale .

In computing tick values and gridlines, several alternative combinations of all the relevant gridline options will be considered and alternatives will be rejected if the formatted tick labels would be duplicated or overlap. So you can specify format:"#" if you want to only show integer tick values, but be aware that if no alternative satisfies this condition, no gridlines or ticks will be shown.

Type: string
Default: auto
vAxis.gridlines

An object with members to configure the gridlines on the vertical axis. Note that vertical axis gridlines are drawn horizontally. To specify properties of this object, you can use object literal notation, as shown here:

{color: '#333', minSpacing: 20}
Type: object
Default: null
vAxis.gridlines.color

The color of the vertical gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: '#CCC'
vAxis.gridlines.count

The approximate number of horizontal gridlines inside the chart area. If you specify a positive number for gridlines.count , it will be used to compute the minSpacing between gridlines. You can specify a value of 1 to only draw one gridline, or 0 to draw no gridlines. Specify -1, which is the default, to automatically compute the number of gridlines based on other options.

Type: number
Default: -1
vAxis.gridlines.units

Overrides the default format for various aspects of date/datetime/timeofday data types when used with chart computed gridlines. Allows formatting for years, months, days, hours, minutes, seconds, and milliseconds.

General format is:

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*/]}
  }
}

Additional information can be found in Dates and Times .

Type: object
Default: null
vAxis.minorGridlines

An object with members to configure the minor gridlines on the vertical axis, similar to the vAxis.gridlines option.

Type: object
Default: null
vAxis.minorGridlines.color

The color of the vertical minor gridlines inside the chart area. Specify a valid HTML color string.

Type: string
Default: A blend of the gridline and background colors
vAxis.minorGridlines.count

The minorGridlines.count option is mostly deprecated, except for disabling minor gridlines by setting the count to 0. The number of minor gridlines depends on the interval between major gridlines (see vAxis.gridlines.interval) and the minimum required space (see vAxis.minorGridlines.minSpacing).

Type: number
Default: 1
vAxis.minorGridlines.units

Overrides the default format for various aspects of date/datetime/timeofday data types when used with chart computed minorGridlines. Allows formatting for years, months, days, hours, minutes, seconds, and milliseconds.

General format is:

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*/]},
  }
}

Additional information can be found in Dates and Times .

Type: object
Default: null
vAxis.logScale

If true, makes the vertical axis a logarithmic scale. Note: All values must be positive.

Type: boolean
Default: false
vAxis.scaleType

vAxis property that makes the vertical axis a logarithmic scale. Can be one of the following:

  • null - No logarithmic scaling is performed.
  • 'log' - Logarithmic scaling. Negative and zero values are not plotted. This option is the same as setting vAxis: { logscale: true } .
  • 'mirrorLog' - Logarithmic scaling in which negative and zero values are plotted. The plotted value of a negative number is the negative of the log of the absolute value. Values close to 0 are plotted on a linear scale.
Type: string
Default: null
vAxis.textPosition

Position of the vertical axis text, relative to the chart area. Supported values: 'out', 'in', 'none'.

Type: string
Default: 'out'
vAxis.textStyle

An object that specifies the vertical axis text style. The object has this format:

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

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Replaces the automatically generated Y-axis ticks with the specified array. Each element of the array should be either a valid tick value (such as a number, date, datetime, or timeofday), or an object. If it's an object, it should have a v property for the tick value, and an optional f property containing the literal string to be displayed as the label.

The viewWindow will be automatically expanded to include the min and max ticks unless you specify a viewWindow.min or viewWindow.max to override.

Examples:

  • 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] }
Type: Array of elements
Default: auto
vAxis.title

vAxis property that specifies a title for the vertical axis.

Type: string
Default: no title
vAxis.titleTextStyle

An object that specifies the vertical axis title text style. The object has this format:

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

The color can be any HTML color string, for example: 'red' or '#00cc00' . Also see fontName and fontSize .

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Moves the max value of the vertical axis to the specified value; this will be upward in most charts. Ignored if this is set to a value smaller than the maximum y-value of the data. vAxis.viewWindow.max overrides this property.

Type: number
Default: automatic
vAxis.minValue

Moves the min value of the vertical axis to the specified value; this will be downward in most charts. Ignored if this is set to a value greater than the minimum y-value of the data. vAxis.viewWindow.min overrides this property.

Type: number
Default: null
vAxis.viewWindowMode

Specifies how to scale the vertical axis to render the values within the chart area. The following string values are supported:

  • 'pretty' - Scale the vertical values so that the maximum and minimum data values are rendered a bit inside the bottom and top of the chart area. The viewWindow is expanded to the nearest major gridline for numbers, or the nearest minor gridline for dates and times.
  • 'maximized' - Scale the vertical values so that the maximum and minimum data values touch the top and bottom of the chart area. This will cause vaxis.viewWindow.min and vaxis.viewWindow.max to be ignored.
  • 'explicit' - A deprecated option for specifying the top and bottom scale values of the chart area. (Deprecated because it's redundant with vaxis.viewWindow.min and vaxis.viewWindow.max . Data values outside these values will be cropped. You must specify a vAxis.viewWindow object describing the maximum and minimum values to show.
Type: string
Default: Equivalent to 'pretty', but vaxis.viewWindow.min and vaxis.viewWindow.max take precedence if used.
vAxis.viewWindow

Specifies the cropping range of the vertical axis.

Type: object
Default: null
vAxis.viewWindow.max

The maximum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
vAxis.viewWindow.min

The minimum vertical data value to render.

Ignored when vAxis.viewWindowMode is 'pretty' or 'maximized'.

Type: number
Default: auto
width

Width of the chart, in pixels.

Type: number
Default: width of the containing element

Methods

Method
draw(data, options)

Draws the chart. The chart accepts further method calls only after the ready event is fired. Extended description .

Return Type: none
getAction(actionID)

Returns the tooltip action object with the requested actionID .

Return Type: object
getBoundingBox(id)

Returns an object containing the left, top, width, and height of chart element id . The format for id isn't yet documented (they're the return values of event handlers ), but here are some examples:

var cli = chart.getChartLayoutInterface();

Height of the chart area
cli.getBoundingBox('chartarea').height
Width of the third bar in the first series of a bar or column chart
cli.getBoundingBox('bar#0#2').width
Bounding box of the fifth wedge of a pie chart
cli.getBoundingBox('slice#4')
Bounding box of the chart data of a vertical (eg, column) chart:
cli.getBoundingBox('vAxis#0#gridline')
Bounding box of the chart data of a horizontal (eg, bar) chart:
cli.getBoundingBox('hAxis#0#gridline')

Values are relative to the container of the chart. Call this after the chart is drawn.

Return Type: object
getChartAreaBoundingBox()

Returns an object containing the left, top, width, and height of the chart content (ie, excluding labels and legend):

var cli = chart.getChartLayoutInterface();

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

Values are relative to the container of the chart. Call this after the chart is drawn.

Return Type: object
getChartLayoutInterface()

Returns an object containing information about the onscreen placement of the chart and its elements.

The following methods can be called on the returned object:

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

Call this after the chart is drawn.

Return Type: object
getHAxisValue(xPosition, optional_axis_index)

Returns the horizontal data value at xPosition , which is a pixel offset from the chart container's left edge. Can be negative.

Example: chart.getChartLayoutInterface().getHAxisValue(400) .

Call this after the chart is drawn.

Return Type: number
getImageURI()

Returns the chart serialized as an image URI.

Call this after the chart is drawn.

See Printing PNG Charts .

Return Type: string
getSelection()

Returns an array of the selected chart entities. Selectable entities are points and legend entries. A point corresponds to a cell in the data table, and a legend entry to a column (row index is null). For this chart, only one entity can be selected at any given moment. Extended description .

Return Type: Array of selection elements
getVAxisValue(yPosition, optional_axis_index)

Returns the vertical data value at yPosition , which is a pixel offset down from the chart container's top edge. Can be negative.

Example: chart.getChartLayoutInterface().getVAxisValue(300) .

Call this after the chart is drawn.

Return Type: number
getXLocation(dataValue, optional_axis_index)

Returns the pixel x-coordinate of dataValue relative to the left edge of the chart's container.

Example: chart.getChartLayoutInterface().getXLocation(400) .

Call this after the chart is drawn.

Return Type: number
getYLocation(dataValue, optional_axis_index)

Returns the pixel y-coordinate of dataValue relative to the top edge of the chart's container.

Example: chart.getChartLayoutInterface().getYLocation(300) .

Call this after the chart is drawn.

Return Type: number
removeAction(actionID)

Removes the tooltip action with the requested actionID from the chart.

Return Type: none
setAction(action)

Sets a tooltip action to be executed when the user clicks on the action text.

The setAction method takes an object as its action parameter. This object should specify 3 properties: id — the ID of the action being set, text —the text that should appear in the tooltip for the action, and action — the function that should be run when a user clicks on the action text.

Any and all tooltip actions should be set prior to calling the chart's draw() method. Extended description .

Return Type: none
setSelection()

Selects the specified chart entities. Cancels any previous selection. Selectable entities are points and legend entries. A point corresponds to a cell in the data table, and a legend entry to a column (row index is null). For this chart, only one entity can be selected at a time. Extended description .

Return Type: none
clearChart()

Clears the chart, and releases all of its allocated resources.

Return Type: none

Events

For more information on how to use these events, see Basic Interactivity , Handling Events , and Firing Events .

Name
animationfinish

Fired when transition animation is complete.

Properties: none
click

Fired when the user clicks inside the chart. Can be used to identify when the title, data elements, legend entries, axes, gridlines, or labels are clicked.

Properties: targetID
error

Fired when an error occurs when attempting to render the chart.

Properties: id, message
legendpagination

Fired when the user clicks legend pagination arrows. Passes back the current legend zero-based page index and the total number of pages.

Properties: currentPageIndex, totalPages
onmouseover

Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element.

Properties: row, column
onmouseout

Fired when the user mouses away from a visual entity. Passes back the row and column indices of the corresponding data table element.

Properties: row, column
ready

The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired.

Properties: none
select

Fired when the user clicks a visual entity. To learn what has been selected, call getSelection() .

Properties: none

Data policy

All code and data are processed and rendered in the browser. No data is sent to any server.