Как создать страницу html с уникальным URL для каждого элемента таблицы html - PullRequest
0 голосов
/ 01 апреля 2020

У меня есть таблица, которая собирает информацию из базы данных (Java сервлеты), для каждой строки этой таблицы диаграмма, созданная с plot.ly, отображается во всплывающем окне (модально), если вы нажимаете кнопку. Я хотел бы знать, если бы можно было создать для каждого результата таблицы определенный c url, например: http://mywebsite.com/chart_1, http://mywebsite.com/chart_2 ... http://mywebsite.com/chart_n

Или каким-либо способом сохранить сгенерированные графические объекты для каждой строки и иметь доступ к ним извне.

Основная цель заключается в том, чтобы из другого На сервере, с установленным Jasper Reports, в самом отчете вы можете просмотреть заданную диаграмму c, нажав кнопку и открыв внешнюю вкладку.

Вот пример диаграммы (в жестком коде), я просто необходимо иметь доступ к диаграмме извне.

<html>
<head>
  <!-- Plotly.js -->
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width:480px; height:400px;"></div>
  <script>
  /* JAVASCRIPT CODE GOES HERE */
	  var trace0 = {
  // x is Time
  x: [0,1,1,0,0,1,1,2,2,3,3,2,2,3],
  // y is Angle
  y: [0,0,1,1,3,3,2,2,3,3,1,1,0,0],
  type: 'scatter',
  name: 'Angle',
  mode: 'lines+markers',
  marker: { size: 6, color:'Blue' }
}

var trace1 = {
  // x is Time (same range as before)
  x: [0.1,1.2,2.1,3],
  // y is Par
  y: [1.5,2.4,4.1,8.44],
  xaxis: "x",
  yaxis:"y2",
  type: 'scatter',
  name: 'Torque',
  mode: 'lines+markers',
  marker: { size: 6, color:'Blue' }
}

var trace2 = {
  // x is Angle, it should be the same list of values (y) than for trace0
  x: [1,3,2,3,1],
  // y is Par, it should be the same list of values (y) than for trace1
  y: [0,1,2,3,4],
  xaxis: "x2",
  yaxis:"y3",
  type: 'scatter',
  name: 'Torque',
  mode: 'lines+markers',
  marker: { size: 6, color:'Blue' }
}

var data = [trace0,trace1,trace2]

var layout = {
    width: 800,
    height: 500,
    title: "SF Curves",
    xaxis: {
                  // anchor is to link horizontal axis with vertical one
      anchor: "y2",
                  // domain is to define the location of the axis
      domain: [0., 1.],
                  // range to define interval of values for the axis
      range: [-1, 4],
      title: "Time (units)"      
    },
    yaxis: {
      anchor: "x",
      range: [0, 4],
      domain: [0.75, 1],
      title: "Angle (un.)"
    },
    yaxis2: {
      anchor: "x",
      range: [0, 10],
      domain: [0.45,0.7],
      title: "Torque (un.)"
    },
    xaxis2: {
      anchor:"y3",
      domain: [0., 1.],
      title: "Angle (units)"
    },
    yaxis3: {
      domain: [0, 0.25],
      anchor: "x2",
      scaleanchor:"y2",
      title: "Torque (un.)"
    },
    showlegend: false
}

Plotly.newPlot('myDiv', data, layout)
  </script>
</body>
</html>

1 Ответ

0 голосов
/ 01 апреля 2020

На ум приходит несколько вещей:

  • рендерит html в изображение и обслуживает файлы * stati c, каждый с уникальным именем. Это может быть сделано с различными библиотеками java chrome без головы Фантом Js
  • Использование узла или сервлета java или любой веб-сервер для обслуживания html на основе URL. Пока у него есть доступ к вашей базе данных. Так что для вашего примера http://mywebsite.com/chart_1 где 1 будет идентификатором строки вашей таблицы базы данных. Затем в Jasper включите URL или вставьте его в iframe.
  • Plotly имеет скрипт экспорта изображений в python, который вы можете использовать для создания stati c файлов и их обслуживания в веб-сервер очень похож на 1-й вариант.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...