在3个不同的谷歌折线图中可视化数据
大家好，所以我有脚本.js它是从我的数据库获取数据（读取.php作为API），并将数据存储在我的索引.html文件的表中。数据库中的列是：日期、温度、压力和 RPM。我现在拥有的是3个图表，包括3条线 -->温度+压力+rpm。但是我怎么能拆分数据以在自己的谷歌折线图中显示每个元素。所以我希望有3个折线图：1个温度图表+ 1个压力图表+ 1个rpm图表。我必须保留1个包含所有数据的表。
"use strict";
google.charts.load('current', {packages: ['controls', 'line', 'table']});
document.getElementById('get').addEventListener('click', getData);
async function getData() {
let response = await fetch("http://localhost:8000/read1.php");
let json = await response.json();
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 < json.length; i++) {
addRow(json[i]);
data.addRow(Object.values(json[i]));
}
var chartTemp = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'temperature_data',
dataTable: data,
options: {
chart: {
title: 'Temperature',
subtitle: ''
},
height: 300
},
view: {
columns: [1 , 2]
}
});
chartTemp.draw();
var chartPres = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'pressure_data',
dataTable: data,
options: {
chart: {
title: 'Pressure',
subtitle: ''
},
height: 300
},
view: {
columns: [1 , 3]
}
});
chartPres.draw();
var chartRPM = new google.visualization.ChartWrapper({
chartType: 'Line',
containerId: 'rpm_data',
dataTable: data,
options: {
chart: {
title: 'RPM',
subtitle: ''
},
height: 300
},
view: {
columns: [1 , 4]
}
});
chartRPM.draw();
var chartTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_data',
dataTable: data,
options: {}
});
chartTable.draw();
}
这是我的脚本，目前我有3个图表，但它们都显示3个元素，我怎么能拆分它？
德玛西亚991回答
-
眼眸繁星
建议使用图表包装器类来绘制图表。谷歌图表也有一个表格图表，所以你可以使用它，而不是手动构建表格。表格图表会生成一个普通的 html 表格，因此您可以应用当前拥有的任何样式。加上它有内置的排序...首先，将 和 包添加到 load 语句。'controls''table'google.charts.load('current', { packages: ['controls', 'line', 'table']}).then(function () { document.getElementById('get').addEventListener('click', getData);});还建议使用load语句返回的承诺，以确保Google图表已加载，在分配点击事件之前，请参阅上文...接下来，图表包装器有一个属性。这允许您直接在图表上应用视图。您可以使用它来控制图表中包含数据表中的哪些列...viewvar 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();有关示例，请参阅以下工作片段...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>编辑表格图表应使用元素，类似于其他图表。<div>尝试替换以下内容... <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>至于样式，不确定它们是如何应用的。如果您在 元素上使用 id...<tbody id="table_data">#table_data { /* styles */}然后替换为...#table_data tbody { /* styles */}
随时随地看视频慕课网APP
相关分类
JavaScript