نمودار را سفارشی کنید 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

          // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

// Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

گزینه ها را مشخص کنید

هر نمودار دارای بسیاری از گزینه های قابل تنظیم است، از جمله عنوان، رنگ ها، ضخامت خط، پر کردن پس زمینه و غیره. اگرچه تیم Chart Tools روی ظاهر نمودار پیش‌فرض سخت کار کرده است، ممکن است بخواهید نمودار خود را سفارشی کنید، مثلاً برچسب‌های عنوان یا محور را اضافه کنید.

با تعریف یک شی جاوا اسکریپت با ویژگی های option_name / option_value ، گزینه های سفارشی را برای نمودار خود مشخص کنید. از نام گزینه های فهرست شده در اسناد نمودار استفاده کنید. اسناد هر نمودار مجموعه ای از گزینه های قابل تنظیم را فهرست می کند. برای مثال، گزینه‌های موجود برای نمودار دایره‌ای شامل «افسانه»، «عنوان» و «is3D» است. همه گزینه ها دارای یک مقدار پیش فرض مستند هستند.

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

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

شی گزینه های موجود در مثال بالا را با این مقادیر به روز کنید تا ببینید چگونه بر نمودار تأثیر می گذارد.

اندازه نمودار را مشخص کنید

یکی از گزینه های بسیار رایج برای تنظیم ارتفاع و عرض نمودار است. می توانید اندازه نمودار را در دو مکان مشخص کنید: در HTML عنصر <div> ظرف یا در گزینه های نمودار. اگر اندازه را در هر دو مکان مشخص کنید، نمودار به طور کلی به اندازه مشخص شده در HTML تغییر می کند. اگر اندازه نمودار را در HTML یا به عنوان یک گزینه مشخص نکنید، نمودار ممکن است به درستی ارائه نشود.

برای تعیین اندازه در یک مکان یا مکان دیگر مزایایی وجود دارد:

  • تعیین اندازه در HTML - یک نمودار ممکن است چند ثانیه طول بکشد تا بارگیری و ارائه شود. اگر اندازه کانتینر نمودار را قبلاً در HTML دارید، هنگام بارگیری نمودار، طرح‌بندی صفحه تغییر نخواهد کرد.
  • تعیین اندازه به عنوان گزینه نمودار - اگر اندازه نمودار در جاوا اسکریپت است، می توانید جاوا اسکریپت را کپی و جایگذاری کنید، یا سریال، ذخیره و بازیابی کنید و اندازه نمودار را به طور مداوم تغییر دهید.

اطلاعات بیشتر