我想要一个如下所示的表：.仅将折线图替换为仪表板图，如下所示：使用我的代码运行以下代码片段以查看我得到的结果。 //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');我希望将仪表板插入到每一行中。可能是什么问题？
2 回答
人到中年有点甜
TA贡献1895条经验 获得超7个赞
仪表板仅出现在最后一行的原因是因为只有一个仪表板元素。
当它执行循环时，它将仪表板附加并移动到每个单元格，
循环完成时最终到达最后一行。
我们不使用现有的仪表板元素，而是
动态添加仪表板元素，每一行一个。
在这里，我们使用 html 模板来存储仪表板内容。
<!-- template: dashboard template -->
<script id="template-dashboard" type="text/html">
<div id="dashboard-{{Id}}" style="border: 1px solid #ccc;">
<table class="columns">
<tr>
<td>
<div id="chart-{{Id}}"></div>
<div id="control-{{Id}}" style="padding-left: 2em; min-width: 250px;"></div>
</td>
</tr>
</table>
</div>
</script>
然后将内容添加到每个表格单元格，
使用行索引作为每个仪表板和控件的 ID。
// insert dashboard html
tableCell.insertAdjacentHTML('beforeEnd', renderTemplate('template-dashboard', {
Id: rowIndex
}));
然后我们可以使用 id 引用新创建的元素...
// build dashboard
var dashboardContainer = tableCell.appendChild(document.getElementById('dashboard-' + rowIndex));
请参阅以下工作片段...
google.charts.load('current', {
'packages': ['corechart', 'controls', 'table', 'charteditor']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var tableData = new google.visualization.DataTable();
tableData.addColumn('string', 'Name');
tableData.addColumn('number', 'Salary');
tableData.addColumn('string', 'Chart');
tableData.addColumn('string', 'Test');
tableData.addRows([
['Mike', {
v: 10000,
f: '$10,000'
}, null, '5thFirst'],
['Jim', {
v: 8000,
f: '$8,000'
}, null, '5thSecond'],
['Alice', {
v: 12500,
f: '$12,500'
}, null, '5thThird'],
['Bob', {
v: 7000,
f: '$7,000'
}, null, '5thForth']
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
google.visualization.events.addListener(table, 'ready', function() {
// table body
Array.prototype.forEach.call(table.getContainer().getElementsByTagName('tbody'), function(tableBody) {
// table rows
Array.prototype.forEach.call(tableBody.rows, function(tableRow, rowIndex) {
// table cells
Array.prototype.forEach.call(tableRow.cells, function(tableCell, cellIndex) {
// determine cell
if (cellIndex === (2)) {
// insert dashboard html
tableCell.insertAdjacentHTML('beforeEnd', renderTemplate('template-dashboard', {
Id: rowIndex
}));
// build dashboard
var dashboardContainer = tableCell.appendChild(document.getElementById('dashboard-' + rowIndex));
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control-' + rowIndex,
'options': {
'filterColumnIndex': 0,
'ui': {
'chartOptions': {
'height': 50,
'chartArea': {
'width': '75%'
},
'series': {
0: {
'targetAxisIndex': 0
},
1: {
'targetAxisIndex': 1
}
},
'vAxes': {
0: {
'title': 'Weight'
},
1: {
'title': 'smA'
}
}
}
}
},
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'chart-' + rowIndex,
'options': {
'legend': {
'position': 'bottom',
'alignment': 'center',
'textStyle': {
'fontSize': 12
}
},
'explorer': {
'actions': ['dragToZoom', 'rightClickToReset'],
'axis': 'horizontal',
'keepInBounds': true
},
'hAxis': {
'title': 'X'
},
'pointSize': 3,
'series': {
0: {
'targetAxisIndex': 0
},
1: {
'targetAxisIndex': 1
}
},
'vAxes': {
0: {
'title': 'Weight'
},
1: {
'title': 'smA'
}
}
}
});
// build chart data table
var chartData = new google.visualization.DataTable();
chartData.addColumn('date', 'timestamp');
chartData.addColumn('number', 'weight');
chartData.addColumn('number', 'smA');
chartData.addRow([new Date(2016, 0, 1), 1, 123]);
chartData.addRow([new Date(2016, 1, 1), 6, 42]);
chartData.addRow([new Date(2016, 2, 1), 4, 49]);
chartData.addRow([new Date(2016, 3, 1), 23, 486]);
chartData.addRow([new Date(2016, 4, 1), 89, 476]);
chartData.addRow([new Date(2016, 5, 1), 46, 444]);
var dashboard = new google.visualization.Dashboard(dashboardContainer);
dashboard.bind(control, chart);
dashboard.draw(chartData);
}
});
});
});
});
table.draw(tableData, {
showRowNumber: false,
width: '100%',
height: '100%'
});
}
// render html template
function renderTemplate(templateId, templateValues) {
var templateText; // html string to return
var templateValue; // html value
// get template html
templateText = document.getElementById(templateId).innerHTML;
// replace place holders with values
if (templateValues) {
for (var propHandle in templateValues) {
if (templateValues.hasOwnProperty(propHandle)) {
templateValue = '';
if (templateValues[propHandle] !== null) {
templateValue = templateValues[propHandle].toString();
}
if (templateValue.indexOf('$') > -1) {
templateValue = templateValue.replace(new RegExp('\\$', 'g'), '$$$');
}
if (templateText.indexOf('{{' + propHandle + '}}') > -1) {
templateText = templateText.replace(new RegExp('{{' + propHandle + '}}', 'g'), templateValue);
}
}
}
}
return templateText.trim();
}
html,
body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.chart {
width: 500px;
height: 300px border: 1px solid black;
min-height: 200px;
}
.beige-background {
background-color: beige;
}
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="table_div"></div>
<!-- template: dashboard template -->
<script id="template-dashboard" type="text/html">
<div id="dashboard-{{Id}}" style="border: 1px solid #ccc;">
<table class="columns">
<tr>
<td>
<div id="chart-{{Id}}"></div>
<div id="control-{{Id}}" style="padding-left: 2em; min-width: 250px;"></div>
</td>
</tr>
</table>
</div>
</script>
</body>
</html>
30秒到达战场
TA贡献1828条经验 获得超6个赞
我认为您的问题来自以下行：
var dashboardContainer = tableCell.appendChild(document.createElement('dashboard_div'));
“dashboard_div”是什么类型的元素？这将创建以下内容：
<dashboard_div></dashboard_div>
我确信这不是您想要的，因为您想将图表插入：
<div id="dashboard_div">
而且这两件事并不相同。
您可以通过使用开发人员控制台检查 HTML 来查看图表是否确实插入到正确的 HTML 标记中来查看结果。
添加回答
举报
0/150
提交
取消