【问题标题】:Javascript readin txt file into chartJavascript将文本文件读入图表
【发布时间】:2021-04-28 01:55:59
【问题描述】:

我真的需要一些帮助来解决这个问题......

我找到了一个代码,它可以根据他从网站获得的值绘制图表。 这很接近我想要实现的目标。 但我不想从网站上获取值,而是从 txt 文件中获取。

我读到我应该使用json字符串来转换它,但我不是程序员所以我不明白如何做这样的事情。

在我的问题结束时,我有从互联网获取价值的代码。

txt 文件现在需要很简单,例如: [[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 + "&ystart=" + yValue + "&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>

【问题讨论】:

    标签: javascript html charts txt


    【解决方案1】:

    将包含 JSON 的文本文件的 URL 添加到代码中的 updateData 函数中,将下面示例中的“https://www.mywebsite/thetextfile.txt”替换为文本文件的 URL。

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

    【讨论】:

    • txt 文件是本地的,例如:C:\Users\nickv\OneDrive\Bureaublad\Cha 那么我该如何使用它
    • 将文本文件移动到与您的 html 文件相同的位置,然后将代码更改为以下代码,将“thetextfile.txt”替换为您的文本文件的名称。函数 updateData() { $.getJSON("thetextfile.txt", addData); }
    猜你喜欢
    • 1970-01-01
    • 2013-07-04
    • 2021-09-25
    • 2016-04-23
    • 2016-02-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多