ภาพรวม
ใน Google Charts จํานวนมาก ค่าข้อมูลจะแสดงที่จุดที่แน่นอน แผนภูมิเส้นเป็นเพียงชุดจุดหนึ่งๆ ที่เชื่อมต่อด้วยเส้น และแผนภูมิกระจายก็เป็นเพียงจุดเท่านั้น
ในแผนภูมิทั้งหมดแต่แผนภูมิกระจาย จุดเหล่านี้จะมีขนาดเป็น 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' }
}
};
<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,
};
<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'
};
<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>
รูปร่าง "ดาว" และ "รูปหลายเหลี่ยม" ช่วยให้คุณกําหนดจํานวนด้านได้ ทั้ง 2 ด้านมีค่าเริ่มต้นเป็น 5 ดาว 4 เหลี่ยมบางส่วนมีดังนี้
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
colors: ['#EF851C'],
pointSize: 30,
pointShape: { type: 'star', sides: 4 }
};
<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>
<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 }
};
<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-dentshape-rotationshape-sidesshape-typestroke-color(ระบุเป็นสตริงฐานสิบหก)stroke-width(ระบุเป็นสตริงฐานสิบหก)sizevisible(มองเห็นจุดหรือไม่)
ความทึบแสงจะควบคุมผ่านรูปแบบไม่ได้ แต่เป็นตัวเลือก dataOpacity