Google Charts: how do I style one point in a scatter chart?
Question
By using the scatter chart API at Google Charts, together with this example on how to change the shape/color/etc for one point, I've been trying hard to accomplish this. However, while the point that is supposed to be individually styled shows up, it is not changed according to the given style. Here is a small example:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X-axis');
data.addColumn('number', 'A data');
data.addColumn({'type': 'string', 'role': 'style'});
data.addColumn('number', 'B data');
data.addColumn({'type': 'string', 'role': 'style'});
data.addRows([
[1.1, 12, null, null, null],
[1.3, 13, null, null, null],
[0.1, null, null, 0, null],
[0.3, null, null, 3, null],
[1.2, 13, 'point {size: 13; shape-type: star; fill-color: #00ffff;}', null, null],
[0.2, null, null, 4, 'point {size: 13; shape-type: star; fill-color: #ff00ff;}'],
]);
var options = {
width: 800,
height: 500,
chart: {
title: 'Small example'
},
hAxis: {title: 'X-axis'},
vAxis: {title: 'Y-axis'}
};
var chart = new google.charts.Scatter(document.getElementById('example_scatter_chart'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
}
</script>
</head>
<body>
<div id="example_scatter_chart" style="width: 500px; height: 500px;"></div>
</body>
</html>
What am I missing here?
1 answers
solution1
1 ACCPTED 2016-09-01 15:37:20
role: 'style' simply doesn't work on a Material chart google.charts.Scatter
need to use 'packages':['corechart'] and google.visualization.ScatterChart
see following working snippet...
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'X-axis'); data.addColumn('number', 'A data'); data.addColumn({'type': 'string', 'role': 'style'}); data.addColumn('number', 'B data'); data.addColumn({'type': 'string', 'role': 'style'}); data.addRows([ [1.1, 12, null, null, null], [1.3, 13, null, null, null], [0.1, null, null, 0, null], [0.3, null, null, 3, null], [1.2, 13, 'point {size: 13; shape-type: star; fill-color: #00ffff;}', null, null], [0.2, null, null, 4, 'point {size: 13; shape-type: star; fill-color: #ff00ff;}'] ]); var options = { width: 800, height: 500, chart: { title: 'Small example' }, hAxis: {title: 'X-axis'}, vAxis: {title: 'Y-axis'}, theme: 'material' }; var chart = new google.visualization.ScatterChart(document.getElementById('example_scatter_chart')); chart.draw(data, options); }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="example_scatter_chart"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.