将 Drupal 嵌入的 Google Visualization/Graph 转移到 React App 中

编程问答 2022-04-22

问题描述

下面是一个指向 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 (将#修改为@）

drupalgoogle-visualizationhtmljavascriptreactjsreactjsreactjsreactjs