问题
I'm working on a project that they need google chart to be save as an image. But when convert to image using "chart.getImageURI()" the base64 string generated makes annotations move back. please check the code snippet attached.
I checked the documentation but was unable to find anything there as well. I tried "alwaysOutside: true" and "z-index: " properties as well.
Does anyone have any idea?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<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('number', 'Age');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn('number', 'Value');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn('number', 'Total');
data.addColumn('number', 'Other Total');
data.addRows([
[50, null, null, 89561, null, null, null, 184298, 184298],
[51, null, null, 95600, null, null, null, 188500, 188500],
[52, null, null, 101900, null, null, null, 192900, 188900],
[53, 'T', null, 108400, null, null, null, 197700, 191300],
[54, null, null, 115200, null, null, null, 202700, 193900],
[57, null, null, 136900, null, null, null, 219400, 202200],
[58, null, null, 144600, null, null, null, 225500, 205100],
[59, null, null, 152600, 'X', null, null, 231900, 208200],
[60, null, null, 160900, null, null, null, 238700, 211300],
[64, null, null, 197100, null, null, null, 268900, 225000],
[65, null, null, 206500, null, null, null, 276900, 228300],
[66, 'P', 'First Point', 0, null, null, null, 236000, 186800],
[67, null, null, 0, null, null, null, 195100, 145600],
[68, null, null, 0, null, null, null, 154400, 104600],
[69, null, null, 0, null, null, null, 113700, 63700],
[70, null, null, 0, null, null, null, 73100, 23100],
[71, null, null, 0, null, null, null, 32500, 0],
[72, null, null, 0, '', 'S', 'Second Point', 0, 0],
[73, null, null, 0, null, null, null, 0, 0],
[74, null, null, 0, null, null, null, 0, 0],
[78, null, null, 0, null, null, null, 0, 0],
[79, null, null, 0, null, null, null, 0, 0],
[80, null, null, 0, null, null, null, 0, 0],
[81, null, null, 0, null, null, null, 0, 0],
[82, 'L', 'Last Point', 0, null, null, null, 0, 0],
[83, null, null, 0, null, null, null, 0, 0],
[84, null, null, 0, null, null, null, 0, 0],
[85, null, null, 0, null, null, null, 0, 0],
[86, null, null, 0, null, null, null, 0, 0],
[87, null, null, 0, null, null, null, 0, 0],
]);
var options = {
title: "Value Test",
seriesType: "area",
chartArea: {
left: 90,
top: 40
},
hAxis: {
gridlines: {
color: "transparent"
},
format: "0",
viewWindow: {
max: 105
}
},
height: 400,
width: 620,
focusTarget: "category",
displayAnnotations: true,
series: {
0: {
color: "#9DCF7B",
areaOpacity: 1
},
1: {
color: "#0184A8"
},
2: {
type: "line",
color: "#F8E38A"
}
},
annotations: {
textStyle: {
fontSize: 14,
bold: true,
italic: false,
color: "black"
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width:400; height:600"></div>
<div>Image</div>
<div id="image_div"></div>
</body>
</html>Here is a bar type chart that gives me the same issue. Still trying....
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<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('number', 'Age');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn('number', 'MainValue');
data.addColumn('number', 'Secondary');
data.addColumn('number', 'Other');
data.addColumn('number', 'Requered');
data.addColumn('number', 'RequiredCapacity');
data.addRows([
[60, null, null, null, null, null, 39785, 0, 0, 0, 0],
[61, null, null, null, null, null, 39785, 0, 0, 0, 0],
[62, null, null, null, null, null, 39785, 0, 0, 0, 0],
[63, null, null, null, null, null, 39785, 0, 0, 0, 0],
[64, null, null, null, null, null, 39785, 0, 0, 0, 0],
[65, null, null, null, null, null, 39785, 0, 0, 0, 0],
[66, 'R', 'Rate 66', null, null, null, 0, 0, 0, 40036, 40036],
[67, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[68, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[69, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[70, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[71, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[72, null, null, '', 'T', 'Texture', 0, 0, 0, 32162, 40036],
[73, null, null, null, null, null, 0, 0, 0, 0, 40036],
[74, null, null, null, null, null, 0, 0, 0, 0, 40036],
[75, null, null, null, null, null, 0, 0, 0, 0, 40036],
[76, null, null, null, null, null, 0, 0, 0, 0, 40036],
[77, null, null, null, null, null, 0, 0, 0, 0, 40036],
[78, null, null, null, null, null, 0, 0, 0, 0, 40036],
[79, null, null, null, null, null, 0, 0, 0, 0, 40036],
[80, null, null, null, null, null, 0, 0, 0, 0, 40036],
[81, null, null, null, null, null, 0, 0, 0, 0, 40036],
[82, 'L', 'Lowest', null, null, null, 0, 0, 0, 0, 40036],
[83, null, null, null, null, null, 0, 0, 0, 0, 40036],
[84, null, null, null, null, null, 0, 0, 0, 0, 40036],
[85, null, null, null, null, null, 0, 0, 0, 0, 40036],
[86, null, null, null, null, null, 0, 0, 0, 0, 40036],
[87, null, null, null, null, null, 0, 0, 0, 0, 40036],
[88, null, null, null, null, null, 0, 0, 0, 0, 40036],
[89, null, null, null, null, null, 0, 0, 0, 0, 40036],
[90, null, null, null, null, null, 0, 0, 0, 0, 40036],
[91, null, null, null, null, null, 0, 0, 0, 0, 40036],
[92, null, null, null, null, null, 0, 0, 0, 0, 40036],
[93, null, null, null, null, null, 0, 0, 0, 0, 40036],
[94, null, null, null, null, null, 0, 0, 0, 0, 40036],
[95, null, null, null, null, null, 0, 0, 0, 0, 40036],
[96, null, null, null, null, null, 0, 0, 0, 0, 40036],
[97, null, null, null, null, null, 0, 0, 0, 0, 40036],
[98, null, null, null, null, null, 0, 0, 0, 0, 40036],
[99, null, null, null, null, null, 0, 0, 0, 0, 40036],
[100, null, null, null, null, null, 0, 0, 0, 0, 40036],
[101, null, null, null, null, null, 0, 0, 0, 0, 40036],
[102, null, null, null, null, null, 0, 0, 0, 0, 40036],
[103, null, null, null, null, null, 0, 0, 0, 0, 40036],
[104, null, null, null, null, null, 0, 0, 0, 0, 40036],
[105, null, null, null, null, null, 0, 0, 0, 0, 40036]
]);
var options = {
title: "test2",
seriesType: "bars",
bar: {
groupWidth: "80%"
},
chartArea: {
left: 90,
top: 40
},
hAxis: {
gridlines: {
color: "transparent"
},
format: "0",
viewWindow: {
max: 105
}
},
height: 400,
width: 620,
focusTarget: "annotation",
displayAnnotations: true,
series: {
0: {
color: "#F8E38A"
, lineWidth: 2
},
1: {
color: "#9DCF7B"
},
2: {
color: "#1F88A7"
},
3: {
color: "#B2DAE5"
},
4: {
type: "line",
color: "grey",
lineWidth: 1
, lineDashStyle: [
10,
2
]
}
},
annotations: {
textStyle: {
fontSize: 14,
bold: true,
italic: false,
color: "black"
}
}
, isStacked: true
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width:400; height:600"></div>
<div>Images</div>
<div id="image_div"></div>
</body>
</html>回答1:
must be a bug with --> getImageURI()
but you can manually build your own image...
var chartContainer = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var svg = chartContainer.getElementsByTagName('svg')[0];
var svgContent = new XMLSerializer().serializeToString(svg);
var domURL = window.URL || window.webkitURL || window;
var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
var image = document.getElementById('image_div').appendChild(new Image());
image.src = imageURL;
});
see following working snippets...
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<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('number', 'Age');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn('number', 'MainValue');
data.addColumn('number', 'Secondary');
data.addColumn('number', 'Other');
data.addColumn('number', 'Requered');
data.addColumn('number', 'RequiredCapacity');
data.addRows([
[60, null, null, null, null, null, 39785, 0, 0, 0, 0],
[61, null, null, null, null, null, 39785, 0, 0, 0, 0],
[62, null, null, null, null, null, 39785, 0, 0, 0, 0],
[63, null, null, null, null, null, 39785, 0, 0, 0, 0],
[64, null, null, null, null, null, 39785, 0, 0, 0, 0],
[65, null, null, null, null, null, 39785, 0, 0, 0, 0],
[66, 'R', 'Rate 66', null, null, null, 0, 0, 0, 40036, 40036],
[67, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[68, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[69, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[70, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[71, null, null, null, null, null, 0, 0, 0, 40036, 40036],
[72, null, null, '', 'T', 'Texture', 0, 0, 0, 32162, 40036],
[73, null, null, null, null, null, 0, 0, 0, 0, 40036],
[74, null, null, null, null, null, 0, 0, 0, 0, 40036],
[75, null, null, null, null, null, 0, 0, 0, 0, 40036],
[76, null, null, null, null, null, 0, 0, 0, 0, 40036],
[77, null, null, null, null, null, 0, 0, 0, 0, 40036],
[78, null, null, null, null, null, 0, 0, 0, 0, 40036],
[79, null, null, null, null, null, 0, 0, 0, 0, 40036],
[80, null, null, null, null, null, 0, 0, 0, 0, 40036],
[81, null, null, null, null, null, 0, 0, 0, 0, 40036],
[82, 'L', 'Lowest', null, null, null, 0, 0, 0, 0, 40036],
[83, null, null, null, null, null, 0, 0, 0, 0, 40036],
[84, null, null, null, null, null, 0, 0, 0, 0, 40036],
[85, null, null, null, null, null, 0, 0, 0, 0, 40036],
[86, null, null, null, null, null, 0, 0, 0, 0, 40036],
[87, null, null, null, null, null, 0, 0, 0, 0, 40036],
[88, null, null, null, null, null, 0, 0, 0, 0, 40036],
[89, null, null, null, null, null, 0, 0, 0, 0, 40036],
[90, null, null, null, null, null, 0, 0, 0, 0, 40036],
[91, null, null, null, null, null, 0, 0, 0, 0, 40036],
[92, null, null, null, null, null, 0, 0, 0, 0, 40036],
[93, null, null, null, null, null, 0, 0, 0, 0, 40036],
[94, null, null, null, null, null, 0, 0, 0, 0, 40036],
[95, null, null, null, null, null, 0, 0, 0, 0, 40036],
[96, null, null, null, null, null, 0, 0, 0, 0, 40036],
[97, null, null, null, null, null, 0, 0, 0, 0, 40036],
[98, null, null, null, null, null, 0, 0, 0, 0, 40036],
[99, null, null, null, null, null, 0, 0, 0, 0, 40036],
[100, null, null, null, null, null, 0, 0, 0, 0, 40036],
[101, null, null, null, null, null, 0, 0, 0, 0, 40036],
[102, null, null, null, null, null, 0, 0, 0, 0, 40036],
[103, null, null, null, null, null, 0, 0, 0, 0, 40036],
[104, null, null, null, null, null, 0, 0, 0, 0, 40036],
[105, null, null, null, null, null, 0, 0, 0, 0, 40036]
]);
var options = {
title: "test2",
seriesType: "bars",
bar: {
groupWidth: "80%"
},
chartArea: {
left: 90,
top: 40
},
hAxis: {
gridlines: {
color: "transparent"
},
format: "0",
viewWindow: {
max: 105
}
},
height: 400,
width: 620,
focusTarget: "annotation",
displayAnnotations: true,
series: {
0: {
color: "#F8E38A"
, lineWidth: 2
},
1: {
color: "#9DCF7B"
},
2: {
color: "#1F88A7"
},
3: {
color: "#B2DAE5"
},
4: {
type: "line",
color: "grey",
lineWidth: 1
, lineDashStyle: [
10,
2
]
}
},
annotations: {
textStyle: {
fontSize: 14,
bold: true,
italic: false,
color: "black"
}
}
, isStacked: true
};
var chartContainer = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var svg = chartContainer.getElementsByTagName('svg')[0];
var svgContent = new XMLSerializer().serializeToString(svg);
var domURL = window.URL || window.webkitURL || window;
var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
var image = document.getElementById('image_div').appendChild(new Image());
image.src = imageURL;
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width:400; height:600"></div>
<div>Images</div>
<div id="image_div"></div>
</body>
</html>and...
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<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('number', 'Age');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn('number', 'Value');
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotation' });
data.addColumn({ type: 'string', role: 'annotationText' });
data.addColumn('number', 'Total');
data.addColumn('number', 'Other Total');
data.addRows([
[50, null, null, 89561, null, null, null, 184298, 184298],
[51, null, null, 95600, null, null, null, 188500, 188500],
[52, null, null, 101900, null, null, null, 192900, 188900],
[53, 'T', null, 108400, null, null, null, 197700, 191300],
[54, null, null, 115200, null, null, null, 202700, 193900],
[57, null, null, 136900, null, null, null, 219400, 202200],
[58, null, null, 144600, null, null, null, 225500, 205100],
[59, null, null, 152600, 'X', null, null, 231900, 208200],
[60, null, null, 160900, null, null, null, 238700, 211300],
[64, null, null, 197100, null, null, null, 268900, 225000],
[65, null, null, 206500, null, null, null, 276900, 228300],
[66, 'P', 'First Point', 0, null, null, null, 236000, 186800],
[67, null, null, 0, null, null, null, 195100, 145600],
[68, null, null, 0, null, null, null, 154400, 104600],
[69, null, null, 0, null, null, null, 113700, 63700],
[70, null, null, 0, null, null, null, 73100, 23100],
[71, null, null, 0, null, null, null, 32500, 0],
[72, null, null, 0, '', 'S', 'Second Point', 0, 0],
[73, null, null, 0, null, null, null, 0, 0],
[74, null, null, 0, null, null, null, 0, 0],
[78, null, null, 0, null, null, null, 0, 0],
[79, null, null, 0, null, null, null, 0, 0],
[80, null, null, 0, null, null, null, 0, 0],
[81, null, null, 0, null, null, null, 0, 0],
[82, 'L', 'Last Point', 0, null, null, null, 0, 0],
[83, null, null, 0, null, null, null, 0, 0],
[84, null, null, 0, null, null, null, 0, 0],
[85, null, null, 0, null, null, null, 0, 0],
[86, null, null, 0, null, null, null, 0, 0],
[87, null, null, 0, null, null, null, 0, 0],
]);
var options = {
title: "Value Test",
seriesType: "area",
chartArea: {
left: 90,
top: 40
},
hAxis: {
gridlines: {
color: "transparent"
},
format: "0",
viewWindow: {
max: 105
}
},
height: 400,
width: 620,
focusTarget: "category",
displayAnnotations: true,
series: {
0: {
color: "#9DCF7B",
areaOpacity: 1
},
1: {
color: "#0184A8"
},
2: {
type: "line",
color: "#F8E38A"
}
},
annotations: {
textStyle: {
fontSize: 14,
bold: true,
italic: false,
color: "black"
}
}
};
var chartContainer = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
var svg = chartContainer.getElementsByTagName('svg')[0];
var svgContent = new XMLSerializer().serializeToString(svg);
var domURL = window.URL || window.webkitURL || window;
var imageURL = domURL.createObjectURL(new Blob([svgContent], {type: 'image/svg+xml'}));
var image = document.getElementById('image_div').appendChild(new Image());
image.src = imageURL;
});
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width:400; height:600"></div>
<div>Image</div>
<div id="image_div"></div>
</body>
</html>来源：https://stackoverflow.com/questions/54757540/google-chart-annotations-move-to-back-when-generating-image