Где я могу разместить javascript и html-код для печати через Plotly.js в JavaFX?

Question

Я пытаюсь использовать следующий график в стиле Временных рядов в plotly.js, чтобы построить соотношение по отношению к положению. Я уже создал файлы JSON, которые содержат эти переменные, т.е. соотношение и положение.

Я не совсем понимаю, как объединить онлайн-примеры с моим сценарием, потому что они говорят о HTML и Javascript.

Я пытался использовать тег fx: script в XML-файле JavaFX (документ FXML), но, возможно, я поместил его в неправильный тег 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!"");
                }

            }
        });

Мой запрос больше относится к концепции - я пытаюсь понять, как создать граф JSAFX в файле plotl.js с данными, хранящимися в объекте JSON. Я программист-любитель, поэтому буду признателен за простые для понимания ответы, потому что я прошел всю ночь напролет и не могу обернуться вокруг нее:

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

Так что мне нужно, чтобы HTML и Javascript были вставлены где-то в JAVAFX, чтобы этот график работал? Любая помощь будет оценена, спасибо.

P.S. Я также пытался использовать этот тег:

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

Но независимо от того, где я размещаю это в своем документе FXML (я пытался поместить его в (центр) div, а также вне моего (Border Pane) div, он говорит, что это не поддерживается:

родительский элемент "(source)" не принимает свойства

Answer 1

Я просто добавил новую HTML-страницу, вставил в нее весь HTML-код и таким образом загрузил HTML-страницу из класса Controller:

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

Это работает, хотя может и не быть элегантным.