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

<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 بالفعل، فلن ينتقل تنسيق الصفحة عند تحميل المخطط.
  • تحديد الحجم كخيار في الرسم البياني - إذا كان حجم المخطط في جافا سكريبت، يمكنك نسخه ولصقه أو تسلسله وحفظه واستعادته، وتغيير حجم المخطط باستمرار.

 

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