javascript - 我应该在哪里放置 javascript 和 html 代码以便通过 JavaFX 中的 Plotly.js 进行绘图？

Question

我正在尝试在 plotly.js 中使用以下时间序列样式的图来绘制比率与位置。我已经创建了包含这些变量的 JSON 文件，即比率和位置。

我对如何将在线示例与我的案例场景相结合感到困惑，因为它们谈论的是 HTML 和 Javascript。

我尝试在 JavaFX(FXML 文档)的 xml 文件中使用 fx:script 标签，但也许我把它放在了错误的 div 中？为了便于理解，我从 plotly.js 示例中复制粘贴了整个代码:

https://plot.ly/javascript/time-series/

并将其粘贴到我的 FXML 中，如下所示 - 只是为了看看我是否能掌握它的工作原理，以便我可以在该概念的基础上进行构建并进行更改以添加我自己的数据:

<center>
   <WebView fx:id="webView" prefHeight="414.0" prefWidth="863.0" BorderPane.alignment="CENTER">
    <fx:script> 
        Plotly.d3.csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv", function(err, rows){

            function unpack(rows, key) {
            return rows.map(function(row) { return row[key]; });
          }


          var trace1 = {
            type: "scatter",
            mode: "lines",
            name: 'AAPL High',
            x: unpack(rows, 'Date'),
            y: unpack(rows, 'AAPL.High'),
            line: {color: '#17BECF'}
          }

          var trace2 = {
            type: "scatter",
            mode: "lines",
            name: 'AAPL Low',
            x: unpack(rows, 'Date'),
            y: unpack(rows, 'AAPL.Low'),
            line: {color: '#7F7F7F'}
          }

          var data = [trace1,trace2];

          var layout = {
            title: 'Time Series with Rangeslider', 
            xaxis: {
              autorange: true, 
              range: ['2015-02-17', '2017-02-16'], 
              rangeselector: {buttons: [
                  {
                    count: 1, 
                    label: '1m', 
                    step: 'month', 
                    stepmode: 'backward'
                  }, 
                  {
                    count: 6, 
                    label: '6m', 
                    step: 'month', 
                    stepmode: 'backward'
                  }, 
                  {step: 'all'}
                ]}, 
              rangeslider: {range: ['2015-02-17', '2017-02-16']}, 
              type: 'date'
            }, 
            yaxis: {
              autorange: true, 
              range: [86.8700008333, 138.870004167], 
              type: 'linear'
            }
          };

          Plotly.newPlot('webView', data, layout);
          })


    </fx:script>


        <BorderPane.margin>
            <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
        </BorderPane.margin>

    </WebView>

这是我的 Controller 类中的代码:

@FXML
private WebView webView;
@FXML
private Button duumy1;
@FXML
private Button duumy2;
@FXML
private Button duumy3;

WebEngine webEngine;
@FXML
ProgressBar progress;
@FXML
Label progressText;"


"public void dummybutton1(ActionEvent event){
    webEngine.load(""https://www.cranfield.ac.uk"");
}
public void dummybutton2(ActionEvent event){
    webEngine.executeScript(""method_name();"");
}
public void dummybutton3(ActionEvent event){
    //webEngine.executeScript(xhtml.xhtml);
    //webEngine.load(""http://138.250.31.106:3000/"");
}
public void loadKegg(ActionEvent event){
    webEngine.load(""https://www.genome.jp/kegg/"");
}"


"   


@Override
public void initialize(URL url, ResourceBundle rb) {

    webEngine = webView.getEngine();


    webEngine.getLoadWorker().stateProperty().addListener(
        new ChangeListener<State>() {
            @Override
            public void changed(ObservableValue ov, State oldState, State newState) {
                if (newState != State.SUCCEEDED){
                    progressText.setText(""Loading Page... Please wait."");
                    progress.setVisible(true);
                }

                if (newState == State.SUCCEEDED) {
                     // hide progress bar then page is ready
                     progress.setVisible(false);
                     progressText.setText(""Thank you for waiting!"");
                }

            }
        });

我的查询更多是关于概念的——我试图了解如何使用存储在 JSON 对象中的数据在 JAVAFX 中创建 plotl.js TimeSeries 图。我是一名业余编码员，所以我会喜欢易于理解的答案，因为我整晚都经历了以下问题，无法全神贯注:

https://docs.oracle.com/javase/8/javafx/api/javafx/fxml/doc- 
files/introduction_to_fxml.html#scripting
https://docs.oracle.com/javafx/2/webview/jfxpub-webview.htm
https://o7planning.org/en/11151/javafx-webview-and-webengine-tutorial
http://www.java2s.com/Code/Java/JavaFX/WebEngineLoadListener.htm

所以我需要在 JAVAFX 的某处注入(inject) HTML 和 Javascript 才能使该图起作用？任何帮助将不胜感激，谢谢。

附言我也试过使用这个标签:

<html><![CDATA[This is <b>bold</b>]]></html>

但无论我将它放在我的 FXML 文档中的什么位置(我尝试将它放在(中心)div 以及我的(Border Pane)div 之外，它都说它不受支持:

父元素“(source)”不接受属性

Answer 1

我刚刚添加了一个新的 HTML 页面并将所有 HTML 代码粘贴到其中，然后从 Controller 类加载了 html 页面:

String url = myCurrentClass.class.getResource("/html.html").toExternalForm();
webEngine.load(url)

它有效，但可能不优雅。