javascript - 试图加载一些数据
问题描述
我试图了解如何运行一些代码。我想用 JSON 文件中的数据绘制圆圈。我不太确定该怎么做。我想我搞砸了不连接文件,或者我的 JSON 文件设置不正确....我的最终目标是制作一个连接的散点图,所以,现在,我只关注圆圈。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<svg id="s" xmlns="http://www.w3.org/2000/svg" />
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var data;
$.getJSON("https://raw.githubusercontent.com/Nataliemcg18/Data/master/temp.json", function(data) {
draw(data);
});
var circle = makeSVG('circle', {
cx: 100,
cy: 50,
r: 40,
stroke: 'black',
'stroke-width': 2,
fill: 'red'
});
var data
document.getElementById('s').appendChild(circle);
</script>
<svg width="1000" height="1000">
<line x1="200" y1="100" x2="200" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" />
<line x1="200" y1="600" x2="900" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" /> <!-- bottom line -->
[
{"Month": 0, "Temperature": 32},
{"Month": 1, "Temperature": 43},
{"Month": 2, "Temperature": 52},
{"Month": 3, "Temperature": 60},
{"Month": 4, "Temperature": 70},
{"Month": 5, "Temperature": 80},
{"Month": 6, "Temperature": 90},
{"Month": 7, "Temperature": 80},
{"Month": 8, "Temperature": 65},
{"Month": 9, "Temperature": 45},
{"Month": 10, "Temperature": 33},
{"Month": 11, "Temperature": 24}
]
解决方案
这样的事情呢?2 个值 - 零和最大值添加只是为了好玩...您仍然可以从原始 jQuery 请求中读取和传递数据。
// 1 (-2) new functions
function draw(data) {
var placeHolder = document.getElementById('s');
const diameter = 25, height = placeHolder.previousElementSibling.previousElementSibling.y2.baseVal.value - placeHolder.previousElementSibling.previousElementSibling.y1.baseVal.value;
setMax(data, height - 2 * diameter); // set last temperature value as chart max
for(var month in data) {
var pair = data[month];
var circle = makeSVG('circle', {
cx: pair.Month * diameter * 2 + 200 + diameter,
cy: 600 - diameter - pair.Temperature,
r: diameter,
stroke: 'black',
'stroke-width': 2,
fill: 'red'
});
placeHolder.appendChild(circle);
}
}
function setMax(data, value) {
data[data.length-1].Temperature = value;
}
// Your untouched logic
$.getJSON("https://raw.githubusercontent.com/Nataliemcg18/Data/master/temp.json", function(data) {
draw(data);
});
function makeSVG(tag, attrs) {
var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle = makeSVG('circle', {
cx: 100,
cy: 50,
r: 40,
stroke: 'black',
'stroke-width': 2,
fill: 'red'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<svg width="1000" height="1000">
<line x1="200" y1="100" x2="200" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" />
<line x1="200" y1="600" x2="900" y2="600" height="1000" width="1000" style="stroke:black;stroke-width:2" />
<svg id="s" xmlns="http://www.w3.org/2000/svg" />
推荐阅读
- c# - Linq分组并选择子组中最常出现的项目
- python - 单词和字母列表到字母列表
- c# - 令牌过期 asp net
- haproxy - HaProxy 1.8 在生产中
- java - 如何同步两种方法以防止它们同时被不同的线程访问,但只允许一个方法的多个实例
- javascript - Math.pow 会在所有 Node.js 平台上给出相同的结果吗?
- ios - 如何在IOS上使用nativescript-camera和nativescript-background-http上传图片
- kubernetes - 更改 Kubernetes 集群 ip 范围
- javascript - PapaParse 脚本路径未定义
- selenium - Selenium Webdriver 从哪个地方获得标题 - 使用 driver.title