将折线图嵌入html页面内的Google图表表中 [英] Embedding a line chart inside a google chart table inside an html page
问题描述
我有一个表格(取自Google图表)和一个折线图(也取自该图表)，我想将其嵌入表格中.我知道有一种方法可以通过将标记"allow html"提高到表格中来在表格内嵌入html页面.但没有找到确切的语法来做到这一点.我希望它看起来像这样(此处使用迷你图):这是我的HTML表格:
I have a table(taken from google charts) and a line chart(also taken from there) and I want to embed it inside the table. I know there is a way to embed an html page inside a table by raising the flag "allow html" but didn't manage to find the exact syntax to do so. I want it to look like this(used sparkline here): This is my html for table:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true, **HTML LINE CHART1 HERE**],
['Jim', {v:8000, f: '$8,000'}, false, **HTML LINE CHART2 HERE**],
['Alice', {v: 12500, f: '$12,500'}, true,**HTML LINE CHART3 HERE**],
['Bob', {v: 7000, f: '$7,000'}, true,**HTML LINE CHART4 HERE**]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
折线图的html:
<html>
<head>
<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 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
我希望第二个html例如出现在boolean列的instrad中.谢谢!!!
And I want the second html to appear for example instrad of the boolean column. Thanks!!!
推荐答案
建议先绘制表格.
然后在表格的'ready'事件中，
在每个表格单元格中添加一个图表.
recommend drawing the table first.
then on the table's 'ready' event,
add a chart to each table cell.
请参阅以下工作摘要...
see following working snippet...
一旦就绪事件触发，我们将获得表格图表容器.
然后找到每一行和每个单元格.
我们将折线图的容器添加到最后一个单元格，然后绘制该图.
once the ready event fires, we get the table chart container.
then find each row and cell.
we add the line chart's container to the last cell, and draw the chart.
表格表中的数据用于绘制每个折线图.
表数据中的行被循环，直到绘制图表的行为止.
the data from the table chart is used to draw each line chart.
the rows from the table data are looped, up until the row for the chart that is being drawn.
google.charts.load('current', {
packages: ['corechart', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('string', 'Chart');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, null],
['Jim', {v: 8000, f: '$8,000'}, null],
['Alice', {v: 12500, f: '$12,500'}, null],
['Bob', {v: 7000, f: '$7,000'}, null]
]);
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 if last cell
if (cellIndex === (tableRow.cells.length - 1)) {
// add chart continer
var chartContainer = tableCell.appendChild(document.createElement('div'));
chartContainer.className = 'chart';
// build chart data table
var dataChart = new google.visualization.DataTable();
dataChart.addColumn('number', 'x');
dataChart.addColumn('number', 'y');
for (var i = 0; i <= rowIndex; i++) {
dataChart.addRow([i, data.getValue(i, 1)]);
}
// draw chart
var chart = new google.visualization.LineChart(chartContainer);
chart.draw(dataChart, {
chartArea: {
left: 24,
top: 16,
right: 24,
bottom: 16,
height: '100%',
width: '100%'
},
height: '100%',
legend: 'none',
pointSize: 6,
width: '100%'
});
}
});
});
});
});
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
});html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.chart {
min-height: 200px;
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>这篇关于将折线图嵌入html页面内的Google图表表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
