谷歌图表注释移动生成图像时候回来(Google chart annotations move to

2019-09-28 04:33发布

站内文章 / 移动开发

33 0

啃猪蹄的小仙女

女 | 书童

私信

我的工作，他们需要谷歌的图表被保存为图像的项目。但是，当转换为使用“chart.getImageURI（）”图像中的Base64串产生使得注释回迁。请检查连接的代码片段。

我查了资料，但无法在那里找到任何东西为好。我想“alwaysOutside：真正的”和“的z-index：”性为好。

有人有什么主意吗？

 <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>

下面是给了我同样的问题，直板型的图表。仍在尝试....

 <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>

Answer 1:

必须是一个错误用- > getImageURI()

但您可以手动建立你自己的图片...

  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;
  });

看到下面的工作片断......

 <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 chart annotations move to back when generating image