как я могу использовать эту таблицу js с пружинным ботинком? - PullRequest
Новая
       14

как я могу использовать эту таблицу js с пружинным ботинком?

0 голосов
/ 09 мая 2020

Я не знаю, как я могу отправить данные с этого контроллера на диаграмму js в этом контроллере, я отправляю список formNames 

// chart rh
@RequestMapping("/chartline")
public String chartLine() {
    JsonObject jsonObject = new JsonObject();

    List<String> formNames = formrepo.findFormationNames();

    JsonArray jsonform = new JsonArray();

    for (String formname : formNames) {
        jsonform.add(formname);
    }

    jsonObject.add("formNames", jsonform);

    return jsonObject.toString();
}

это диаграмма js где я хочу запросить данные с контроллера Я хочу запросить formNames в var formNames plzz help Я уже 3 дня пробовал что-нибудь, чтобы решить эту проблему, но это не работает 

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var formNames = [
  "Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
var myLineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: formNames,
        datasets: [{
          label: "Earnings",
          lineTension: 0.3,
          backgroundColor: "rgba(78, 115, 223, 0.05)",
          borderColor: "rgba(78, 115, 223, 1)",
          pointRadius: 3,
          pointBackgroundColor: "rgba(78, 115, 223, 1)",
          pointBorderColor: "rgba(78, 115, 223, 1)",
          pointHoverRadius: 3,
          pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
          pointHoverBorderColor: "rgba(78, 115, 223, 1)",
          pointHitRadius: 10,
          pointBorderWidth: 2,
          data: [0, 10000, 5000, 15000, 10000, 20000,
            15000, 25000, 20000, 30000, 25000, 40000
          ],
        }],
      },

это jsp 

<div class="card shadow mb-4">
  <div class="card-header py-3">
    <h6 class="m-0 font-weight-bold text-primary">Area Chart</h6>
  </div>
  <div class="card-body">
    <div class="chart-area">
      <canvas id="myAreaChart"></canvas>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 09 мая 2020
• 1000 * 
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'http://localhost:8080/chartline')
ourRequest.onload = function() {
  var ourData = JSON.parse(ourRequest.responseText).formNames;
  console.log(ourData);
  hafid(ourData);
};
ourRequest.send();

// Area Chart Example
function hafid(ourData) {
  var ctx = document.getElementById("myAreaChart");
  var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ourData,
          datasets: [{
            label: "Earnings",
            lineTension: 0.3,
            backgroundColor: "rgba(78, 115, 223, 0.05)",
            borderColor: "rgba(78, 115, 223, 1)",
            pointRadius: 3,
            pointBackgroundColor: "rgba(78, 115, 223, 1)",
            pointBorderColor: "rgba(78, 115, 223, 1)",
            pointHoverRadius: 3,
            pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
            pointHoverBorderColor: "rgba(78, 115, 223, 1)",
            pointHitRadius: 10,
            pointBorderWidth: 2,
            data: [0, 10000, 5000, 15000, 10000, 20000,
              15000, 25000, 20000, 30000, 25000, 40000
            ],
          }],
        },
...