หน้านี้ได้รับการแปลโดย Cloud Translation API

การปรับแต่งจุด

ภาพรวม
ตัวอย่างง่ายๆ
การหมุน
การปรับแต่งจุดแต่ละจุด

ภาพรวม

ใน Google แผนภูมิจำนวนมาก ค่าของข้อมูลจะแสดง ณ จุดที่แน่นอน แผนภูมิเส้นเป็นเพียงชุดของจุดเหล่านี้ที่เชื่อมต่อกันด้วยเส้น ส่วนแผนภูมิกระจายนั้นไม่มีแต่จุด

ในแผนภูมิทั้งหมดยกเว้นแผนภูมิกระจาย จุดเหล่านี้จะมีขนาดเป็น 0 โดยค่าเริ่มต้น คุณควบคุมขนาดได้โดยใช้ตัวเลือก pointSize และรูปร่างได้โดยใช้ตัวเลือก pointShape

ด้านบน คุณจะเห็นแผนภูมิที่มี 6 ชุด โดยแต่ละชุดมี pointSize 30 แต่มี pointShape ที่แตกต่างกัน

ตัวเลือก

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 7 },
          pointSize: 30,
          series: {
                0: { pointShape: 'circle' },
                1: { pointShape: 'triangle' },
                2: { pointShape: 'square' },
                3: { pointShape: 'diamond' },
                4: { pointShape: 'star' },
                5: { pointShape: 'polygon' }
            }
        };

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, null, null, null, null, null],
              [2, null, 3, null, null, null, null],
              [3, null, null, 4, null, null, null],
              [4, null, null, null, 5, null, null],
              [5, null, null, null, null, 6, null],
              [6, null, null, null, null, null, 7]
        ]);

        var options = {
          legend: 'none',
          pointSize: 30,
          series: {
                0: { pointShape: 'circle' },
                1: { pointShape: 'triangle' },
                2: { pointShape: 'square' },
                3: { pointShape: 'diamond' },
                4: { pointShape: 'star' },
                5: { pointShape: 'polygon' }
            }
        };

        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>

ตัวอย่างง่ายๆ บางส่วน

แผนภูมิส่วนใหญ่มีเพียงชุดเดียว ซึ่งต่างจากแผนภูมิในส่วนก่อนหน้านี้ ต่อไปนี้คือตัวอย่างของแผนภูมิเส้นที่มีจุดวงกลม 20 จุด

เนื่องจากค่าเริ่มต้น pointShape คือวงกลม เราจึงปล่อยไว้ในตัวเลือกได้ ดังนี้

ตัวเลือก

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 20,
      };

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', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 3],
              [4, 4],
              [5, 4],
              [6, 3],
              [7, 2.5],
              [8, 3]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 20,
        };

        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>

คุณเปลี่ยนจาก "วงกลม" เป็นรูปร่างอื่นได้โดยตั้งค่า pointShape เป็น "สามเหลี่ยม" "สี่เหลี่ยมจัตุรัส" "ข้าวหลามตัด" "ดาว" หรือ "รูปหลายเหลี่ยม" ดังนี้

ตัวเลือก

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#795548'],
          pointSize: 20,
          pointShape: 'square'
        };

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', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 3],
              [4, 4],
              [5, 4],
              [6, 3],
              [7, 2.5],
              [8, 3]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#795548'],
          pointSize: 20,
          pointShape: 'square'
       };

        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>

คุณสามารถใช้รูปร่าง "ดาว" และ "รูปหลายเหลี่ยม" เพื่อปรับแต่งจำนวนด้าน ซึ่งมีค่าเริ่มต้นเป็น 5 ด้าน ดาว 4 ด้านบางส่วน:

ตัวเลือก

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#EF851C'],
          pointSize: 30,
          pointShape: { type: 'star', sides: 4 }
        };

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', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 3],
              [4, 4],
              [5, 4],
              [6, 3],
              [7, 2.5],
              [8, 3]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          colors: ['#EF851C'],
          pointSize: 30,
          pointShape: { type: 'star', sides: 4 }
        };

        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>

คุณสามารถปรับแต่งดาวเพิ่มเติมด้วยตัวเลือก dent ซึ่งควบคุมความเว้าของดาว เมื่อรอยบุ๋มเข้าใกล้ 0 ดาวจะมีลักษณะคล้ายปลาดาว เมื่อรอยบุ๋มเข้าใกล้หนึ่ง รอยบุ๋มจะขยายผ่านรูปหลายเหลี่ยมด้านเท่าๆ กัน

ต่อไปนี้เป็นการบุบระหว่าง 0.05 ถึง 0.8 ของดาว 5 ด้าน

ตัวเลือก

var options = {
    legend: 'none',
    hAxis: { textPosition: 'none' },
    vAxis: { textPosition: 'none', gridlines: { count: 0 },
	     baselineColor: 'white' },
    colors: ['#E94D20', '#ECA403', '#63A74A',
	     '#15A0C8', '#4151A3', '#703593', '#981B48'],
    pointSize: 20,
    annotations: { stemColor: 'white', textStyle: { fontSize: 16 } },
    series: {
	0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
	1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
	2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
	3: { pointShape: { type: 'star', sides: 5 } },
	4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
	5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
	6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
    }
};

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('string', 'Element');
	  data.addColumn('number', 'A');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'B');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'C');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'D');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'E');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'F');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addColumn('number', 'G');
	  data.addColumn( { type: 'string', role: 'annotation' });
	  data.addRow(['A', 1, "dent: 0.05", , , , , , , , , , , , null]);
	  data.addRow(['B', , , 1, "dent: 0.1", , , , , , , , , , null]);
	  data.addRow(['C', , , , , 1, "dent: 0.2", , , , , , , , null]);
	  data.addRow(['D', , , , , , , 1, "default", , , , , , null]);
	  data.addRow(['E', , , , , , , , , 1, "dent: 0.5", , , , null]);
	  data.addRow(['F', , , , , , , , , , , 1, "dent: 0.7", , null]);
	  data.addRow(['G', , , , , , , , , , , , , 1, "dent: 0.8"]);

	  var options = {
              legend: 'none',
	      hAxis: { textPosition: 'none' },
              vAxis: { textPosition: 'none', gridlines: { count: 0 },
		       baselineColor: 'white' },
              colors: ['#E94D20', '#ECA403', '#63A74A',
		       '#15A0C8', '#4151A3', '#703593', '#981B48'],
              pointSize: 20,
              annotations: { stemColor: 'white', textStyle: { fontSize: 16 } },
              series: {
		  0: { pointShape: { type: 'star', sides: 5, dent: 0.05 } },
		  1: { pointShape: { type: 'star', sides: 5, dent: 0.1 } },
		  2: { pointShape: { type: 'star', sides: 5, dent: 0.2 } },
		  3: { pointShape: { type: 'star', sides: 5 } },
		  4: { pointShape: { type: 'star', sides: 5, dent: 0.5 } },
		  5: { pointShape: { type: 'star', sides: 5, dent: 0.7 } },
		  6: { pointShape: { type: 'star', sides: 5, dent: 0.8 } },
              }
          };

          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>

การหมุน

รูปร่างของจุดทุกรูปร่างสามารถหมุนได้โดยใช้ตัวเลือก rotation ซึ่งระบุเป็นองศา ตัวอย่างเช่น เราสามารถทำให้สามเหลี่ยมชี้ลงในแผนภูมิพื้นที่ต่อไปนี้โดยหมุน 180 องศา

ตัวเลือก

        var options = {
          legend: 'none',
          colors: ['#15A0C8'],
          pointSize: 30,
          pointShape: { type: 'triangle', rotation: 180 }
        };

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', 'Y'],
              [1, 3],
              [2, 2.5],
              [3, 2],
              [4, 3],
              [5, 4.5],
              [6, 6.5],
              [7, 9],
              [8, 12]
        ]);

        var options = {
          legend: 'none',
          colors: ['#15A0C8'],
          pointSize: 30,
          pointShape: { type: 'triangle', rotation: 180 }
        };

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

การปรับแต่งจุดแต่ละจุด

โดยค่าเริ่มต้น รูปแบบที่ใช้กับจุดหนึ่งจะใช้กับจุดทั้งหมดในชุด หากต้องการเปลี่ยนลักษณะของจุดข้อมูลใดจุดหนึ่ง คุณสามารถทำได้โดยการจัดรูปแบบ

ในแผนภูมิต่อไปนี้ เราจะเพิ่มขนาดของจุดใดจุดหนึ่ง ลดความทึบแสงเป็น 0.3 และเปลี่ยนรูปร่างและสี

<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', 'Y', {'type': 'string', 'role': 'style'}],
              [1, 3, null],
              [2, 2.5, null],
              [3, 3, null],
              [4, 4, null],
              [5, 4, null],
              [6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; }'],
              [7, 2.5, null],
              [8, 3, null]
        ]);

        var options = {
          legend: 'none',
          hAxis: { minValue: 0, maxValue: 9 },
          curveType: 'function',
          pointSize: 7,
          dataOpacity: 0.3
        };

        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>

การปรับแต่งรูปแบบที่ใช้งานได้มีดังต่อไปนี้

fill-color (ระบุเป็นสตริงฐานสิบหก)
shape-dent
shape-rotation
shape-sides
shape-type
stroke-color (ระบุเป็นสตริงฐานสิบหก)
stroke-width (ระบุเป็นสตริงฐานสิบหก)
size
visible (ไม่ว่าจะมองเห็นจุดหรือไม่ก็ตาม)

ความทึบแสงจะควบคุมไม่ได้ผ่านรูปแบบ แต่ควบคุมโดยใช้ตัวเลือก dataOpacity