تخصيص الرسم البياني 

<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>

 

تحديد الخيارات

يحتوي كل مخطط على العديد من الخيارات القابلة للتخصيص، بما في ذلك العنوان والألوان وسمك الخط وتعبئة الخلفية وما إلى ذلك. على الرغم من أن فريق "أدوات المخطط" عمل بجد على مظهر المخطط الافتراضي، فقد ترغب في تخصيص المخطط الخاص بك، على سبيل المثال لإضافة تسميات العناوين أو المحاور.

حدد خيارات مخصصة للرسم البياني عن طريق تحديد كائن JavaScript باستخدام السمتين option_name/option_value. استخدِم أسماء الخيارات المدرَجة في مستندات الرسم البياني. تسرد وثائق كل رسم بياني مجموعة من الخيارات القابلة للتخصيص. على سبيل المثال، تشتمل الخيارات المتاحة للمخطط الدائري على 'legend' و'title' و 'is3D'. تحتوي جميع الخيارات على قيمة تلقائية موثَّقة.

يحدد الكائن التالي موضع وسيلة الإيضاح وعنوان الرسم البياني وحجم المخطط وخيار ثلاثي الأبعاد للمخطط الدائري:

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

حدِّث كائن الخيارات في المثال أعلاه بهذه القيم لمعرفة مدى تأثيرها على الرسم البياني.

تحديد حجم الرسم البياني

أحد الخيارات الشائعة جدًا التي يمكن تعيينها هو ارتفاع المخطط وعرضه. يمكنك تحديد حجم الرسم البياني في موضعَين: في رمز HTML للعنصر <div> في الحاوية أو في خيارات الرسم البياني. إذا حددت الحجم في كلا الموضعين، فسيتم تأجيل الرسم البياني بشكل عام إلى الحجم المحدد في HTML. إذا لم تحدِّد حجم الرسم البياني في HTML أو كخيار، قد لا يتمّ عرض الرسم البياني بشكلٍ صحيح.

وهناك مزايا لتحديد الحجم في مكان واحد أو مكان آخر:

  • تحديد الحجم في HTML - قد يستغرق تحميل الرسم البياني بضع ثوانٍ لتحميله وعرضه. إذا كان حجم حاوية الرسم البياني بالفعل بتنسيق HTML، لن يتغير تنسيق الصفحة عند تحميل الرسم البياني.
  • تحديد الحجم كخيار للرسم البياني - إذا كان حجم الرسم البياني في JavaScript، يمكنك نسخ JavaScript ولصقه أو إنشاء تسلسل له أو حفظه واستعادته، وتغيير حجم الرسم البياني بشكل متّسق.

 

مزيد من المعلومات