Tổng quan
Trong nhiều Biểu đồ của Google, giá trị dữ liệu được hiển thị ở các điểm chính xác. Biểu đồ dạng đường chỉ là một tập hợp các điểm được nối với nhau bằng đường kẻ và biểu đồ tán xạ không phải là điểm.
Trong tất cả các biểu đồ, trừ biểu đồ tán xạ, các điểm này có kích thước bằng 0 theo mặc định. Bạn có thể kiểm soát kích thước của chúng bằng tuỳ chọn pointSize và hình dạng của chúng bằng tuỳ chọn pointShape.
Ở trên, bạn có thể thấy một biểu đồ có sáu chuỗi, mỗi biểu đồ có pointSize 30 nhưng pointShape khác nhau.
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>
Một số ví dụ đơn giản
Không giống như biểu đồ trong phần trước, hầu hết các biểu đồ chỉ có một chuỗi. Dưới đây là ví dụ về biểu đồ dạng đường có các điểm tròn 20 pt:
Vì pointShape mặc định là vòng tròn, chúng ta có thể loại bỏ nó khỏi các tùy chọn sau:
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>
Bạn có thể thay đổi từ "vòng tròn" thành một hình dạng khác bằng cách đặt pointShape thành "hình tam giác", "hình vuông", "hình thoi", "sao" hoặc "đa giác":
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>
Hình dạng "sao" và "đa giác" cho phép bạn tuỳ chỉnh số cạnh, cả hai đều mặc định là năm. Một số ngôi sao có bốn cạnh:
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>
Bạn có thể tuỳ chỉnh thêm các dấu sao với tuỳ chọn dent, giúp kiểm soát mức độ lõm của ngôi sao. Khi vết lõm gần bằng 0, sao sẽ trông giống như sao biển; khi vết lõm tiến gần đến một dấu vết, nó sẽ phình lên trên một đa giác đều.
Dưới đây là các vết lõm từ 0,05 đến 0,8 đối với năm sao:
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>
Xoay vòng
Bạn có thể xoay tất cả các hình dạng điểm bằng tùy chọn rotation, được chỉ định bằng độ. Ví dụ: chúng ta có thể làm cho tam giác chỉ xuống dưới trong biểu đồ vùng sau đây bằng cách xoay góc 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>
Tuỳ chỉnh từng điểm
Theo mặc định, kiểu được áp dụng cho một điểm sẽ áp dụng cho tất cả các điểm trong chuỗi. Nếu muốn thay đổi giao diện của một điểm dữ liệu cụ thể, bạn có thể thực hiện bằng cách định kiểu cho điểm dữ liệu đó.
Trong biểu đồ sau, chúng tôi tăng kích thước của một trong các điểm, giảm độ mờ xuống 0, 3 và thay đổi hình dạng và màu sắc:
<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>
Bạn có các tuỳ chỉnh kiểu sau đây:
fill-color(Được chỉ định dưới dạng chuỗi thập lục phân).shape-dentshape-rotationshape-sidesshape-typestroke-color(Được chỉ định dưới dạng chuỗi thập lục phân).stroke-width(Được chỉ định dưới dạng chuỗi thập lục phân).sizevisible(Điểm có hiển thị hay không.)
Độ mờ không được kiểm soát thông qua kiểu, nhưng với tùy chọn dataOpacity.