1 回答

TA貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊
建議使用圖表包裝器
類來(lái)繪制圖表。
谷歌圖表也有一個(gè)表格圖表,所以你可以使用它,而不是手動(dòng)構(gòu)建表格。
表格圖表會(huì)生成一個(gè)普通的 html 表格,因此您可以應(yīng)用當(dāng)前擁有的任何樣式。
加上它有內(nèi)置的排序...
首先,將 和 包添加到 load 語(yǔ)句。'controls''table'
google.charts.load('current', {
packages: ['controls', 'line', 'table']
}).then(function () {
document.getElementById('get').addEventListener('click', getData);
});
還建議使用load語(yǔ)句返回的承諾,
以確保Google圖表已加載,在分配點(diǎn)擊事件之前,請(qǐng)參閱上文...
接下來(lái),圖表包裝器有一個(gè)屬性。
這允許您直接在圖表上應(yīng)用視圖。
您可以使用它來(lái)控制圖表中包含數(shù)據(jù)表中的哪些列...view
var chartTemp = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'temperature_data',
dataTable: data,
options: {
chart: {
title: 'Temperature',
subtitle: ''
},
height: 300
},
view: {
columns: [0, 1] // <-- include x-axis and temperature columns
}
});
chartTemp.draw();
有關(guān)示例,請(qǐng)參閱以下工作片段...
google.charts.load('current', {
packages: ['controls', 'line', 'table']
}).then(getData);
function getData() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'date');
data.addColumn('number', 'temperature');
data.addColumn('number', 'pressure');
data.addColumn('number', 'rpm');
for (var i = 0; i < 12; i++) {
data.addRow([(i + 1) + '/2020', (5 * i), (10 * i), (15 * i)]);
}
var chartTemp = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'temperature_data',
dataTable: data,
options: {
chart: {
title: 'Temperature',
subtitle: ''
},
height: 300
},
view: {
columns: [0, 1]
}
});
chartTemp.draw();
var chartPres = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'pressure_data',
dataTable: data,
options: {
chart: {
title: 'Pressure',
subtitle: ''
},
height: 300
},
view: {
columns: [0, 2]
}
});
chartPres.draw();
var chartRPM = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'rpm_data',
dataTable: data,
options: {
chart: {
title: 'RPM',
subtitle: ''
},
height: 300
},
view: {
columns: [0, 3]
}
});
chartRPM.draw();
var chartTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_data',
dataTable: data,
options: {}
});
chartTable.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="temperature_data"></div>
<div id="pressure_data"></div>
<div id="rpm_data"></div>
<div id="table_data"></div>
</div>
編輯
表格圖表應(yīng)使用元素,類似于其他圖表。<div>
嘗試替換以下內(nèi)容...
<table>
<thead>
<tr>
<th>Date</th>
<th>Temperature</th>
<th>Pressure</th>
<th>RPM</th>
</tr>
</thead>
<tbody id="table_data">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<button id="get">GET</button>
</tbody>
</table>
跟。。。
<div id="table_data"></div>
<button id="get">GET</button>
至于樣式,不確定它們是如何應(yīng)用的。
如果您在 元素上使用 id...<tbody id="table_data">
#table_data {
/* styles */
}
然后替換為...
#table_data tbody {
/* styles */
}
添加回答
舉報(bào)