生成图像时，Google图表注释会向后移动 [英] Google chart annotations move to back when generating image
本文介绍了生成图像时，Google图表注释会向后移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究一个需要将Google图表保存为图像的项目。
但是，当使用 chart.getImageURI（）转换为图像时，生成的base64字符串会使注释移回。
请检查附件中的代码段。
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.
我检查了文档，但也找不到任何内容。
我也尝试过 alwaysOutside：true
和 z-index：属性。
I checked the documentation but was unable to find anything there as well. I tried "alwaysOutside: true" and "z-index: " properties as well.
有人有什么主意吗？
<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>
推荐答案
必须是-> 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>
和...
<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>
这篇关于生成图像时，Google图表注释会向后移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
