Question

花了一个月的时间为我的网站编写了我当前有效的加密货币HTML / JavaScript代码。太多的时间来完成一些原本应该简单得多的痛苦任务。我从零经验和与HTML / JavaScript相关的知识开始。该代码从网站cryptocompare的下拉框中填充了市值最大的100种加密货币的名称，然后用户从下拉框中选择一种加密货币，并返回了相应的加密货币价格数据。

要使代码正常工作，必须在同一文件夹中有两个文件。 JavaS.js和HTML.html。我从下面的代码中删除了我的cryptocompare api密钥。任何人复制和粘贴此代码都需要从网站cryptocompare输入他们自己的api密钥，以便代码运行。

我只剩下一个目标，正在密谋。我尝试了各种JavaScript绘图工具，但没有找到一个简单的好工具。谁能帮我绘制这些数据吗？所有JavaScript绘图功能都必须位于JavaS.js中。 HTML.html文件应简洁明了。

An image of my dropdown box and display of crypto currency data

文件编号1：JavaS.js

function GetData() 
{
var ApiKey = "........" ;
var url = "https://min-api.cryptocompare.com/data/top/mktcapfull?limit=100&tsym=USD&api_key=" + ApiKey; 

$.get(url,callback1) ;
} 

function callback1(WhatToWrite)
{
var x = WhatToWrite;  
var y = x.Data ;
var A = [ ]; 

var select = document.getElementById("MyBox");

for (var i = 0; i < y.length; i++) 
    {
     A.push([y[i].CoinInfo.Name]);
     var el = document.createElement("option");
     el.textContent = y[i].CoinInfo.Name;
     el.value = y[i].CoinInfo.Name;
     select.appendChild(el);
    }
}

function Selection(sel)
{
var ticker = sel.value;  

var ApiKey = "......." ;
var url = "https://min-api.cryptocompare.com/data/histoday?fsym=" + ticker + "&tsym=USD&limit=1000&api_key=" + ApiKey ; 
$.get(url, callback2); 
}

function callback2(WhatToWrite)
{  
var x = WhatToWrite; 
var y = x.Data ;

var D = [ ]; 
var i; 

for (i = 0; i < y.length; i++) 
{
D.push([JSON.stringify(T(y[i].time)), y[i].close]);
} 

document.getElementById("Tag1").innerHTML = "Variable D = " + D;      
}; 

function T(UNIX_timestamp)
{
  var a = new Date(UNIX_timestamp * 1000);
  var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var year = a.getFullYear();
  var month = months[a.getMonth()];
  var date = a.getDate();
  var hour = a.getHours();
  var min = a.getMinutes();
  var sec = a.getSeconds();
  var time = date + ' ' + month + ' ' + year ;
  return time;
}

文件编号2：HTML.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="JavaS.js"></script>
<meta charset="utf-8"/>
</head>

<body>

<select id="MyBox" onchange="Selection(this)" > </select>

<p id="Tag1"></p>        

</body>

<script> 

GetData(); 

</script>

</html>

使用JavaScript的JSON数据的时间序列图

0 个答案: