Создание динамического c графика на веб-странице HTML, которая извлекает данные из текстового файла - PullRequest
Новая
       30

Создание динамического c графика на веб-странице HTML, которая извлекает данные из текстового файла

0 голосов
/ 14 февраля 2020

Я создаю веб-страницу, на которой я хочу показать динамическую c диаграмму пользователю. Аналогично https://canvasjs.com/html5-javascript-dynamic-chart/. Веб-страница должна извлечь данные из текстового файла, а затем обновить график с течением времени. В конечном итоге в txt-файл будут записаны данные, и я хочу иметь возможность выводить данные из txt-файла на веб-страницу по мере ее поступления. Я посмотрел вокруг и https://canvasjs.com/forums/topic/how-can-i-plot-values-from-txt-file/ описывает проблему, с которой я сталкиваюсь. Файл txt имеет значения (для простоты): 1 2 3 4 5 6 7 8 9

Код, который я пытаюсь запустить, приведен ниже, но всякий раз, когда я открываю HTML внутри браузера, экран пустой. 

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];

//Replace text file's path according to your requirement.
$.get("testgraph.txt", function(data) {
    var x = 0;
    var allLines = data.split('\n');
    if(allLines.length > 0) {
        for(var i=0; i< allLines.length; i++) {
            dataPoints.push({x: x , y: parseInt(allLines[i])});
            x += .25;
        }
    }
    var chart = new CanvasJS.Chart("chartContainer",{
        title :{
            text: "Chart using Text File Data"
        },
        data: [{
            type: "line",
            dataPoints : dataPoints,
        }]
    });
    chart.render();
});
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

Я очень смущен тем, почему при открытии браузера экран становится пустым. Текстовый файл называется testgraph.txt и сохраняется на моем рабочем столе (я использую Windows 10). И файл html называется test. html и также сохраняется на моем рабочем столе. Любые идеи были бы очень полезны, поскольку я потерян в этом пункте. Конечная цель состоит в том, чтобы числовые числа поступали в текстовый файл, читались веб-страницей, а затем динамически обновляли график.

Спасибо, Тайлер

...