如何解决将 Drupal 嵌入的 Google Visualization/Graph 转移到 React App 中
下面是一个指向 Drupal 站点页面的链接。有一段代码基本上是从 sql 数据库中提取数据,为图表准备数据,然后将其嵌入。
https://unitedwaterdata.com/batteries
我想在 React 站点中显示完全相同的图形,但我遇到了一些问题,想弄清楚如何获取数据并获得 JSON 响应,我可以使用 react-google-charts 将其集成到图形中.
有没有一种方法可以节省时间并以某种方式将我已有的内容嵌入到我的 React 应用程序中?这就是我要接管的所有代码库,我对它不是很熟悉,但是我可以在节省时间和不重写内容方面做的任何事情都将大有裨益。
这是我需要在 React 应用程序中呈现的 Drupal HTML 块:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='https://www.google.com/jsapi'></script><script type='text/javascript'>
google.load('visualization','1',{'packages': ['controls','table','corechart']});
google.setonLoadCallback(drawVisualization);
function drawVisualization() {
// Pull in remote data from Postgresql via JSON service
var qry_last7days = new google.visualization.Query(
"sites/all/scripts/pg_to_gviz_cwid_showallfalse.PHP?output_type=category2&data_table_name=data2021rebuild._display_999_batteries_last7days&category_index_field=date_trunc&series_index_field=station_desc&series_label_field=station_desc&series_value_field=batt"
);
// Send data to function for GViz displaying
qry_last7days.send(last7days_Callback);
}
function last7days_Callback(response) {
// Define a data table with the remote data
var data_last7days = response.getDataTable();
data_last7days.setColumnLabel(0,"Date");
data_last7days.sort([{ column: 0,desc: false }]);
// Create the dashboard
var dash_last7days = new google.visualization.Dashboard( document.getElementById("dash_last7days")
);
// Define a data filter control
var date_filter = new google.visualization.ControlWrapper({
controlType: "DaterangeFilter",containerId: "date_filter",options: {filterColumnIndex: 0,matchType: 'any',ui: {
label: 'Slide to Filter by Date',selectedValuesLayout: 'aside',labelStacking: 'horizontal'}}});
// Define chart
var chart_batteries = new google.visualization.ChartWrapper({
containerId: "chart_batteries",chartType: "LineChart",options: {
allowHtml: true,chartArea:{left:80,top:130,width:"95%",height:"70%"},title: "Last 7 Days of Hourly Minimum Battery Reports",titleTextStyle: { fontSize: 18,color: "#000080" },vAxis: {
title: "mV",titleTextStyle: { fontSize: 16,italic: false,bold: true },textStyle: { fontSize: 14 },},hAxis: { textStyle: { fontSize: 14 },format: "MM/d/yy" },legend: {position: 'top',maxLines: 7,textStyle: {fontSize: 12}},linewidth: 2,});
// Establish dependencies
dash_last7days.bind([date_filter],[chart_batteries]);
dash_last7days.draw(data_last7days);
}
</script>
<div id="dash_last7days">
<div style="margin-top:20px" id="date_filter" class="rtecenter"></div>
<div style="height: 800px;width: 95%;" id="chart_batteries"></div>
</div>
非常感谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。