javascript - 将 Drupal 嵌入式 Google 可视化/图形传输到 React 应用程序

Question

下面是 Drupal 站点上一个页面的链接。有一段代码基本上从 SQL 数据库中提取数据，为图表准备数据，然后嵌入数据。

https://unitedwaterdata.com/batteries

我想在反应站点中显示完全相同的图表，但我遇到了一些问题，想知道如何获取数据并获得 JSON 响应，我可以使用 react-google-charts 将其集成到图表中。

有没有办法节省时间并以某种方式将我已经拥有的内容嵌入到我的反应应用程序中？这是我正在接管的所有代码库，并且对它不是很熟悉，但是在节省时间和不重写内容方面我能做的任何事情都会在很大程度上是有益的。

这是我需要在 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>

非常感谢。

标签： javascripthtmlreactjsdrupalgoogle-visualization