javascript_plotting a graph_ я мог бы перед добавлением еще одной метки, но после того, как я добавил данные, он не отображает график - PullRequest
Новая
       6

javascript_plotting a graph_ я мог бы перед добавлением еще одной метки, но после того, как я добавил данные, он не отображает график

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

к сожалению, я еще не достаточно ботаник, просто начинающий «программист».

В настоящее время я сосредоточился на публикации sh статьи, и я хочу построить несколько графиков для оценки результатов моей модели.

Я получил откуда-то код для построения графика, и он сработал!

Однако я хочу добавить еще одну строку на график ( тестовые данные, такие как test_loss_trace, test_loss_ts, et c), и моя попытка здесь не работает.

ps. Я впервые пишу слова в этом переполнении стека. Если у меня есть ошибка, пожалуйста, поймите меня. Спасибо.

ПРЕДЫДУЩИЙ КОД 

<!doctype html>

<html lang="en">
<head>
    <title>NIHAO</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div id="chart_losses_round"></div>
  <div id="chart_losses_ts"></div>
  <div id="chart_accuracies_round"></div>
  <div id="chart_accuracies_ts"></div>

  <script>
    function draw_losses(data) {
        var train_rounds = [];
        var valid_rounds = [];
        var train_ts = [];
        var valid_ts = [];
        var train_losses = [];
        var valid_losses = [];
        $.each(data["train_loss"], function(i, v) {
            train_rounds.push(v[0]);
            train_ts.push(v[1]);
            train_losses.push(v[2]);
        })
        $.each(data["valid_loss"], function(i, v) {
            valid_rounds.push(v[0]);
            valid_ts.push(v[1]);
            valid_losses.push(v[2]);
        })
        
        var train_loss_trace = {
            x: train_rounds, 
            y: train_losses, 
            type: 'scatter',
            name: 'training loss'
        };
        var valid_loss_trace = {
            x: valid_rounds, 
            y: valid_losses, 
            type: 'scatter',
            name: 'validation loss'
        };
        var layout = {
          title: 'Loss of global model',
          xaxis: {
            title: 'round',
          },
          yaxis: {
            title: 'Loss',
          }
        };
        Plotly.newPlot('chart_losses_round', [train_loss_trace, valid_loss_trace], layout);

        var train_loss_trace_ts = {
            x: train_ts, 
            y: train_losses, 
            type: 'scatter',
            name: 'training loss'
        };
        var valid_loss_trace_ts = {
            x: valid_ts, 
            y: valid_losses, 
            type: 'scatter',
            name: 'validation loss'
        };            
        var layout = {
          title: 'Loss of global model',
          xaxis: {
            title: 'Time(s)',
          },
          yaxis: {
            title: 'Loss',
          }
        };
        Plotly.newPlot('chart_losses_ts', [train_loss_trace_ts, valid_loss_trace_ts], layout);
    }

    function draw_accuracies(data) {
        var train_rounds = [];
        var valid_rounds = [];
        var train_ts = [];
        var valid_ts = [];
        var train_accuracies = [];
        var valid_accuracies = [];
        $.each(data["train_accuracy"], function(i, v) {
            train_rounds.push(v[0]);
            train_ts.push(v[1]);
            train_accuracies.push(v[2]);
        })
        $.each(data["valid_accuracy"], function(i, v) {
            valid_rounds.push(v[0]);
            valid_ts.push(v[1]);
            valid_accuracies.push(v[2]);
        })
        
        var train_accuracy_trace = {
            x: train_rounds, 
            y: train_accuracies, 
            type: 'scatter',
            name: 'training accuracy'
        };
        var valid_accuracy_trace = {
            x: valid_rounds, 
            y: valid_accuracies, 
            type: 'scatter',
            name: 'validation accuracy'
        };
        var layout = {
          title: 'Accuracy of global model',
          xaxis: {
            title: 'Round',
          },
          yaxis: {
            title: 'Accuracy',
          }
        };
        Plotly.newPlot('chart_accuracies_round', [train_accuracy_trace, valid_accuracy_trace], layout);
        var train_accuracy_trace_ts = {
            x: train_ts, 
            y: train_accuracies, 
            type: 'scatter',
            name: 'training accuracy'
        };
        var valid_accuracy_trace_ts = {
            x: valid_ts, 
            y: valid_accuracies, 
            type: 'scatter',
            name: 'validation accuracy'
        };
        var layout = {
          title: 'Accuracy of global model',
          xaxis: {
            title: 'Time(s)',
          },
          yaxis: {
            title: 'Accuracy',
          }
        };
        Plotly.newPlot('chart_accuracies_ts', [train_accuracy_trace_ts, valid_accuracy_trace_ts], layout);
    }

    var update = setInterval(function(){
        $.get("/stats", function(data) {
            data = JSON.parse(data);
            draw_losses(data);
            draw_accuracies(data);        
        });
    }, 5000); // 5s

    function load_data(data) {
        clearInterval(update);
        draw_losses(data);
        draw_accuracies(data);        
    }

  </script>

ТЕКУЩИЙ КОД 

 
  
<!doctype html>

<html lang="en">
<head>
    <title>NIHAO</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div id="chart_losses_round"></div>
  <div id="chart_losses_ts"></div>
  <div id="chart_accuracies_round"></div>
  <div id="chart_accuracies_ts"></div>

  <script>
    function draw_losses(data) {
        var train_rounds = [];
        var valid_rounds = [];
        var test_rounds = [];  
        var train_ts = [];
        var valid_ts = [];
        var test_ts = [];  
        var train_losses = [];
        var valid_losses = [];
        var test_losses = [];  
        $.each(data["train_loss"], function(i, v) {
            train_rounds.push(v[0]);
            train_ts.push(v[1]);
            train_losses.push(v[2]);
        })
        $.each(data["valid_loss"], function(i, v) {
            valid_rounds.push(v[0]);
            valid_ts.push(v[1]);
            valid_losses.push(v[2]);
        })
        $.each(data["test_loss"], function(i, v) {
            test_rounds.push(v[0]);
            tset_ts.push(v[1]);
            test_losses.push(v[2]);
        })
        
        var train_loss_trace = {
            x: train_rounds, 
            y: train_losses, 
            type: 'scatter',
            name: 'training loss'
        };
        var valid_loss_trace = {
            x: valid_rounds, 
            y: valid_losses, 
            type: 'scatter',
            name: 'validation loss'
        };
		var test_loss_trace = {
            x: test_rounds, 
            y: test_losses, 
            type: 'scatter',
            name: 'test loss'
        };
        var layout = {
          title: 'Loss of global model',
          xaxis: {
            title: 'round',
          },
          yaxis: {
            title: 'Loss',
          }
        };
		
		
        Plotly.newPlot('chart_losses_round', [train_loss_trace, valid_loss_trace, test_loss_trace], layout);

        var train_loss_trace_ts = {
            x: train_ts, 
            y: train_losses, 
            type: 'scatter',
            name: 'training loss'
        };
        var valid_loss_trace_ts = {
            x: valid_ts, 
            y: valid_losses, 
            type: 'scatter',
            name: 'validation loss'
        };     
        var test_loss_trace_ts = {
            x: test_ts, 
            y: test_losses, 
            type: 'scatter',
            name: 'test loss'
        };     		
        var layout = {
          title: 'Loss of global model',
          xaxis: {
            title: 'Time(s)',
          },
          yaxis: {
            title: 'Loss',
          }
        };
        Plotly.newPlot('chart_losses_ts', [train_loss_trace_ts, valid_loss_trace_ts, test_loss_trace_ts], layout);
    }

    function draw_accuracies(data) {
        var train_rounds = [];
        var valid_rounds = [];
        var test_rounds = [];
        var train_ts = [];
        var valid_ts = [];
        var test_ts = [];
        var train_accuracies = [];
        var valid_accuracies = [];
        var test_accuracies = [];
        $.each(data["train_accuracy"], function(i, v) {
            train_rounds.push(v[0]);
            train_ts.push(v[1]);
            train_accuracies.push(v[2]);
        })
        $.each(data["valid_accuracy"], function(i, v) {
            valid_rounds.push(v[0]);
            valid_ts.push(v[1]);
            valid_accuracies.push(v[2]);
        })
        $.each(data["test_accuracy"], function(i, v) {
            test_rounds.push(v[0]);
            test_ts.push(v[1]);
            test_accuracies.push(v[2]);
        })
        
        var train_accuracy_trace = {
            x: train_rounds, 
            y: train_accuracies, 
            type: 'scatter',
            name: 'training accuracy'
        };
        var valid_accuracy_trace = {
            x: valid_rounds, 
            y: valid_accuracies, 
            type: 'scatter',
            name: 'validation accuracy'
        };
        var test_accuracy_trace = {
            x: test_rounds, 
            y: test_accuracies, 
            type: 'scatter',
            name: 'test accuracy'
        };
        var layout = {
          title: 'Accuracy of global model',
          xaxis: {
            title: 'Round',
          },
          yaxis: {
            title: 'Accuracy',
          }
        };
        Plotly.newPlot('chart_accuracies_round', [train_accuracy_trace, valid_accuracy_trace, test_accuracy_trace], layout);
        var train_accuracy_trace_ts = {
            x: train_ts, 
            y: train_accuracies, 
            type: 'scatter',
            name: 'training accuracy'
        };
        var valid_accuracy_trace_ts = {
            x: valid_ts, 
            y: valid_accuracies, 
            type: 'scatter',
            name: 'validation accuracy'
        };
        var test_accuracy_trace_ts = {
            x: test_ts, 
            y: test_accuracies, 
            type: 'scatter',
            name: 'test accuracy'
        };
        var layout = {
          title: 'Accuracy of global model',
          xaxis: {
            title: 'Time(s)',
          },
          yaxis: {
            title: 'Accuracy',
          }
        };
        Plotly.newPlot('chart_accuracies_ts', [train_accuracy_trace_ts, valid_accuracy_trace_ts, test_accuracy_trace_ts], layout);
    }

    var update = setInterval(function(){
        $.get("/stats", function(data) {
            data = JSON.parse(data);
            draw_losses(data);
            draw_accuracies(data);        
        });
    }, 5000); // 5s

    function load_data(data) {
        clearInterval(update);
        draw_losses(data);
        draw_accuracies(data);        
    }

  </script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...