Блог

Главная - Вопросы по программированию - Javascript считывает текстовый файл в диаграмму

Javascript считывает текстовый файл в диаграмму

#javascript #html #charts #txt

#javascript #HTML #Диаграммы #текст

Вопрос:

Мне действительно нужна помощь, чтобы разобраться в этом…

Я нашел код, который строит диаграмму из значений, которые он получает с веб-сайта. Это близко к тому, чего я хотел бы достичь. Но я не хочу получать значения с веб-сайта, а из текстового файла.

Я читал, что я должен использовать строки json для его преобразования, но я не программист, поэтому я не понимаю, как это сделать.

В конце моего вопроса у меня есть код, который получает его значение из Интернета.

Текстовый файл на данный момент должен быть простым, например: [[0, 7], [1, 12], [2, 7], [3, 3], [4, 0], [5, 4]]

Код

 <!DOCTYPE HTML>
<html>
<head>
<script>
//chart
window.onload = function() {

  var dataPoints = [];

  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
      text: "Live Data"
    },
    data: [{
      type: "line",
      dataPoints: dataPoints
    }]
  });
  updateData();

  // Initial Values
  var xValue = 0;
  var yValue = 10;
  var newDataCount = 6;

  function addData(data) {
    if (newDataCount != 1) {
      $.each(data, function(key, value) {
        dataPoints.push({
          x: value[0],
          y: parseInt(value[1])
        });
        xValue  ;
        yValue = parseInt(value[1]);
      });
    } else {
      //dataPoints.shift();
      dataPoints.push({
        x: data[0][0],
        y: parseInt(data[0][1])
      });
      xValue  ;
      yValue = parseInt(data[0][1]);
    }

    newDataCount = 1;
    chart.render();
    setTimeout(updateData, 1500);
  }
  function updateData() {
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart="   xValue   "amp;ystart="   yValue   "amp;length="   newDataCount   "type=json", addData);
  }

}


</script>
</head>
<body>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>

Ответ №1:

Добавьте URL-адрес текстового файла, содержащего JSON, в функцию updateData, найденную в вашем коде, заменив «https://www.mywebsite/thetextfile.txt » в приведенном ниже примере с URL-адресом вашего текстового файла.

 function updateData() {
    $.getJSON("https://www.mywebsite/thetextfile.txt", addData);
  }

Комментарии:

1. Текстовый файл является локальным, например:C:UsersnickvOneDriveBureaubladCha тогда как я могу это использовать

2. Переместите текстовый файл в то же место, что и ваш html-файл, а затем измените код на приведенный ниже, заменив «thetextfile.txt » с именем вашего текстового файла. функция updateData() { $.getJSON(«thetextfile.txt «, addData); }

Метки: