تخصيص الأسطر

نظرة عامة

تحتوي بعض مخططات Google، مثل المنطقة، والمخطط الخطي، والمخططات المجمّعة، على خطوط تربط نقاط البيانات. يمكنك تخصيص لون الخطوط وسُمكها وقطرها باستخدام الأساليب الموضحة في هذه الصفحة.

تغيير اللون

يمكنك تغيير لون الأسطر التي تربط نقاط البيانات في مخططات Google بطريقتين مختلفتين اختلافًا طفيفًا: باستخدام الخيار colors لتغيير لوحة الرسوم البيانية أو باستخدام الخيار series لتحديد اللون لسلسلة معينة.

في المخطط التالي، نعيِّن لون كل سلسلة بشكل صريح.

الخيارات
        var options = {
          legend: 'none',
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };
ملف 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 = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

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

تم تحديد الألوان أعلاه بقيمة سداسية عشرية (على سبيل المثال، '#e2431e'، أو '#f00' للون الأحمر المشبع)، ولكن يمكن تحديدها أيضًا من خلال اسم باللغة الإنجليزية. يوضّح المثال التالي ذلك، ويوضّح أيضًا كيفية التحكّم في الألوان من خلال إصلاح لوحة الرسم البياني باستخدام الخيار colors، بدلاً من ضبط ألوان السلسلة الفردية. ويتمثل أحد الاختلافات في أنه إذا أصلحت لوحة الألوان وكانت هناك مسلسلات أكثر من الألوان المتوفرة في لوحة الألوان، ستتم إعادة استخدام الألوان: إذا كانت لوحة الألوان لديك مكوّنة من الأحمر والأزرق، سيكون نصف المجموعة باللون الأحمر والنصف الآخر أزرق.

الخيارات
        var options = {
          legend: 'none',
          colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
        };
ملف 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 = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray']
        };

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

تغيير السمك

يمكنك التحكّم بسُمك الخطوط باستخدام الخيار lineWidth:

الخيارات
        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          lineWidth: 10,
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };
ملف 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 = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          lineWidth: 10,
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

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

للتحكم في عرض السطر لسلسلة ما، استخدم الخيار series:

الخيارات
        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };
ملف 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 = google.visualization.arrayToDataTable
            ([['X', '1', '2', '3', '4', '5', '6'],
              [1, 2, 3, 4, 5, 6, 7],
              [2, 3, 4, 5, 6, 7, 8],
              [3, 4, 5, 6, 7, 8, 9],
              [4, 5, 6, 7, 8, 9, 10],
              [5, 6, 7, 8, 9, 10, 11],
              [6, 7, 8, 9, 10, 11, 12]
        ]);

        var options = {
          legend: 'none',
          hAxis: { maxValue: 7 },
          vAxis: { maxValue: 13 },
          series: {
            0: { lineWidth: 1 },
            1: { lineWidth: 2 },
            2: { lineWidth: 4 },
            3: { lineWidth: 8 },
            4: { lineWidth: 16 },
            5: { lineWidth: 24 }
          },
          colors: ['#e2431e', '#d3362d', '#e7711b',
                   '#e49307', '#e49307', '#b9c246']
        };

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

الخطوط متقطعة

يمكن استخدام العديد من أنماط الخطوط المتقطعة من خلال الخيار lineDashStyle، الذي يأخذ مصفوفة من الأرقام. ويشير الرقم الأول إلى طول الشرطة، ويشير الرقم الثاني إلى الفجوة بعدها. إذا كان هناك رقم ثالث، هو طول الشرطة التالية، ورقم رابع، إن وجد، هو طول الفجوة التالية.

عند رسم الرسم البياني، يتم تكرار هذه الأطوال، أي أنّ [4, 4] تعني سلسلة متتالية من 4 شُرط وفجوات من 4 طول. [5, 1, 3] تعني شرطة من 5 طول، وفجوة من طول واحد، وشرطة بطول 3، وفجوة من 5 طول، وهكذا. إليك بعض الأمثلة:

الخيارات
        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };
ملف 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 = google.visualization.arrayToDataTable
            ([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]',
               'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]',
               'lineDashStyle: [4, 1]',
               'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]',
               'lineDashStyle: [14, 2, 2, 7]',
               'lineDashStyle: [2, 2, 20, 2, 20, 2]'],
              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
              [2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
              [3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
              [4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
              [5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
              [6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
              [7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
              [8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
              [9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
        ]);

        var options = {
          hAxis: { maxValue: 10 },
          vAxis: { maxValue: 18 },
          chartArea: { width: 380 },
          lineWidth: 4,
          series: {
            0: { lineDashStyle: [1, 1] },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] },
            3: { lineDashStyle: [5, 1, 3] },
            4: { lineDashStyle: [4, 1] },
            5: { lineDashStyle: [10, 2] },
            6: { lineDashStyle: [14, 2, 7, 2] },
            7: { lineDashStyle: [14, 2, 2, 7] },
            8: { lineDashStyle: [2, 2, 20, 2, 20, 2] }
          },
          colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0',
                   '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'],
        };

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