在谷歌图表中嵌入仪表板

Question

 我想要一个如下所示的表：

.

仅将折线图替换为仪表板图，如下所示：

使用我的代码运行以下代码片段以查看我得到的结果。

              //draw players                           

                    function loadImage(path) {

                        let image = new Image();

                        let promise = new Promise((resolve, reject) => {

                            image.onload = () => resolve(image);

                            image.onerror = reject

                        });

                        image.src = path;

                        //Add the following line

                        ctx.drawImage(image,playerList[0].x,playerList[0].y);

                        return promise;

                    }

                    // change loadImage.src = 'trump.gif' into this

                    loadImage('trump.gif');

我希望将仪表板插入到每一行中。可能是什么问题？

Answer 1

仪表板仅出现在最后一行的原因是因为只有一个仪表板元素。当它执行循环时，它将仪表板附加并移动到每个单元格，循环完成时最终到达最后一行。我们不使用现有的仪表板元素，而是动态添加仪表板元素，每一行一个。在这里，我们使用 html 模板来存储仪表板内容。<!-- template: dashboard template --><script id="template-dashboard" type="text/html">&nbsp; <div id="dashboard-{{Id}}" style="border: 1px solid #ccc;">&nbsp; &nbsp; <table class="columns">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="chart-{{Id}}"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="control-{{Id}}" style="padding-left: 2em; min-width: 250px;"></div>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table>&nbsp; </div></script>然后将内容添加到每个表格单元格，使用行索引作为每个仪表板和控件的 ID。// insert dashboard htmltableCell.insertAdjacentHTML('beforeEnd', renderTemplate('template-dashboard', {&nbsp; Id: rowIndex}));然后我们可以使用 id 引用新创建的元素...// build dashboardvar dashboardContainer = tableCell.appendChild(document.getElementById('dashboard-' + rowIndex));请参阅以下工作片段...google.charts.load('current', {&nbsp; 'packages': ['corechart', 'controls', 'table', 'charteditor']});google.charts.setOnLoadCallback(drawChart);function drawChart() {&nbsp; var tableData = new google.visualization.DataTable();&nbsp; tableData.addColumn('string', 'Name');&nbsp; tableData.addColumn('number', 'Salary');&nbsp; tableData.addColumn('string', 'Chart');&nbsp; tableData.addColumn('string', 'Test');&nbsp; tableData.addRows([&nbsp; &nbsp; ['Mike', {&nbsp; &nbsp; &nbsp; v: 10000,&nbsp; &nbsp; &nbsp; f: '$10,000'&nbsp; &nbsp; }, null, '5thFirst'],&nbsp; &nbsp; ['Jim', {&nbsp; &nbsp; &nbsp; v: 8000,&nbsp; &nbsp; &nbsp; f: '$8,000'&nbsp; &nbsp; }, null, '5thSecond'],&nbsp; &nbsp; ['Alice', {&nbsp; &nbsp; &nbsp; v: 12500,&nbsp; &nbsp; &nbsp; f: '$12,500'&nbsp; &nbsp; }, null, '5thThird'],&nbsp; &nbsp; ['Bob', {&nbsp; &nbsp; &nbsp; v: 7000,&nbsp; &nbsp; &nbsp; f: '$7,000'&nbsp; &nbsp; }, null, '5thForth']&nbsp; ]);&nbsp; var table = new google.visualization.Table(document.getElementById('table_div'));&nbsp; google.visualization.events.addListener(table, 'ready', function() {&nbsp; &nbsp; // table body&nbsp; &nbsp; Array.prototype.forEach.call(table.getContainer().getElementsByTagName('tbody'), function(tableBody) {&nbsp; &nbsp; &nbsp; // table rows&nbsp; &nbsp; &nbsp; Array.prototype.forEach.call(tableBody.rows, function(tableRow, rowIndex) {&nbsp; &nbsp; &nbsp; &nbsp; // table cells&nbsp; &nbsp; &nbsp; &nbsp; Array.prototype.forEach.call(tableRow.cells, function(tableCell, cellIndex) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // determine cell&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (cellIndex === (2)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // insert dashboard html&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tableCell.insertAdjacentHTML('beforeEnd', renderTemplate('template-dashboard', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Id: rowIndex&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // build dashboard&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dashboardContainer = tableCell.appendChild(document.getElementById('dashboard-' + rowIndex));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var control = new google.visualization.ControlWrapper({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'controlType': 'ChartRangeFilter',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'containerId': 'control-' + rowIndex,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'options': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'filterColumnIndex': 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'ui': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'chartOptions': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'height': 50,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'chartArea': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'width': '75%'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'series': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'targetAxisIndex': 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'targetAxisIndex': 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'vAxes': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title': 'Weight'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title': 'smA'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var chart = new google.visualization.ChartWrapper({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'chartType': 'ComboChart',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'containerId': 'chart-' + rowIndex,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'options': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'legend': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'position': 'bottom',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'alignment': 'center',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'textStyle': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'fontSize': 12&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'explorer': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'actions': ['dragToZoom', 'rightClickToReset'],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'axis': 'horizontal',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'keepInBounds': true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'hAxis': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title': 'X'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'pointSize': 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'series': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'targetAxisIndex': 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'targetAxisIndex': 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'vAxes': {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title': 'Weight'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 1: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'title': 'smA'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // build chart data table&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var chartData = new google.visualization.DataTable();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addColumn('date', 'timestamp');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addColumn('number', 'weight');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addColumn('number', 'smA');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addRow([new Date(2016, 0, 1), 1, 123]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addRow([new Date(2016, 1, 1), 6, 42]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addRow([new Date(2016, 2, 1), 4, 49]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addRow([new Date(2016, 3, 1), 23, 486]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addRow([new Date(2016, 4, 1), 89, 476]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chartData.addRow([new Date(2016, 5, 1), 46, 444]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var dashboard = new google.visualization.Dashboard(dashboardContainer);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dashboard.bind(control, chart);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dashboard.draw(chartData);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; });&nbsp; table.draw(tableData, {&nbsp; &nbsp; showRowNumber: false,&nbsp; &nbsp; width: '100%',&nbsp; &nbsp; height: '100%'&nbsp; });}// render html templatefunction renderTemplate(templateId, templateValues) {&nbsp; var templateText;&nbsp; &nbsp;// html string to return&nbsp; var templateValue;&nbsp; // html value&nbsp; // get template html&nbsp; templateText = document.getElementById(templateId).innerHTML;&nbsp; // replace place holders with values&nbsp; if (templateValues) {&nbsp; &nbsp; for (var propHandle in templateValues) {&nbsp; &nbsp; &nbsp; if (templateValues.hasOwnProperty(propHandle)) {&nbsp; &nbsp; &nbsp; &nbsp; templateValue = '';&nbsp; &nbsp; &nbsp; &nbsp; if (templateValues[propHandle] !== null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; templateValue = templateValues[propHandle].toString();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (templateValue.indexOf('$') > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; templateValue = templateValue.replace(new RegExp('\\$', 'g'), '$$$');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (templateText.indexOf('{{' + propHandle + '}}') > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; templateText = templateText.replace(new RegExp('{{' + propHandle + '}}', 'g'), templateValue);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }&nbsp; return templateText.trim();}html,body {&nbsp; height: 100%;&nbsp; margin: 0px 0px 0px 0px;&nbsp; padding: 0px 0px 0px 0px;}.chart {&nbsp; width: 500px;&nbsp; height: 300px border: 1px solid black;&nbsp; min-height: 200px;}.beige-background {&nbsp; background-color: beige;}<html>&nbsp; <head>&nbsp; &nbsp; <script src="https://www.gstatic.com/charts/loader.js"></script>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div id="table_div"></div>&nbsp; &nbsp; <!-- template: dashboard template -->&nbsp; &nbsp; <script id="template-dashboard" type="text/html">&nbsp; &nbsp; &nbsp; <div id="dashboard-{{Id}}" style="border: 1px solid #ccc;">&nbsp; &nbsp; &nbsp; &nbsp; <table class="columns">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="chart-{{Id}}"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="control-{{Id}}" style="padding-left: 2em; min-width: 250px;"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </script>&nbsp; </body></html>

Answer 2

我认为您的问题来自以下行：var dashboardContainer = tableCell.appendChild(document.createElement('dashboard_div'));“dashboard_div”是什么类型的元素？这将创建以下内容：<dashboard_div></dashboard_div>我确信这不是您想要的，因为您想将图表插入：<div id="dashboard_div">而且这两件事并不相同。您可以通过使用开发人员控制台检查 HTML 来查看图表是否确实插入到正确的 HTML 标记中来查看结果。