我正在使用Wix以及一些嵌入式JavaScript和HTML来设计一个网站来学习这些语言。我正在使用本教程 https://www.zingchart.com/docs/tutorials/loading-data/using-json-data 但是当我将数据 url 更改为我的数据时，出现错误：
网络错误：找不到资源
部分： 网址数据加载器
JSON数据：
定义
他们的数据：https://storage.googleapis.com/studio-assets/resources/chart.json
我的数据：https://raw.githubusercontent.com/IsaacOldwood/shopTitansData/master/chart.json
我已经通读了文档并更改了我的数据格式以完全匹配他们的格式。我尝试使用github api和原始数据。
他们的代码：
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 100%;
width: 100%;
}
zing-grid[loading] {
height: 800px;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.render({
id: 'myChart',
output: "svg",
"dataurl": "https://storage.googleapis.com/studio-assets/resources/chart.json",
height: "100%",
width: "100%"
});
</script>
</body>
</html>
我网站上的代码嵌入了：
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
html,
body,
#myChart {
height: 98%;
width: 99%;
}
zing-grid[loading] {
height: 800px;
}
</style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
zingchart.render({
id: 'myChart',
output: "svg",
"dataurl": "https://raw.githubusercontent.com/IsaacOldwood/shopTitansData/master/chart.json",
height: "100%",
width: "100%"
});
</script>
</body>
</html>
预期的输出是教程中带有我的数据的图表。但实际输出是错误。
网络错误：找不到资源 (https://raw.githubusercontent.com/IsaacOldwood/shopTitansData/master/chart.json)
部分： 网址数据加载器
JSON数据：
定义
您可以参考我们的数据基础知识教程来开始解决您的问题。
最主要的是，您的url应该从该端点返回一个完整的 JSON 数据包，其中包含正确的标头和 JSON 格式。
演示配置
{
"type": "bar",
"title": {
"text": "Data Basics - Remote Config",
"fontSize": 24
},
"scaleX": {
"label": {
"text": "Days"
},
"labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"scaleY": {
"label": {
"text": "Temperature (°F)"
}
},
"plot": {
"animation":{
"effect": "ANIMATION_EXPAND_BOTTOM",
"method": "ANIMATION_STRONG_EASE_OUT",
"sequence": "ANIMATION_BY_NODE",
"speed": 275
}
},
"series": [{
"values": [23, 20, 27, 29, 25, 17, 15],
"text": "Week 1"
},
{
"values": [35, 42, 33, 49, 35, 47, 35],
"text": "Week 2"
},
{
"values": [15, 22, 13, 33, 44, 27, 31],
"text": "Week 3"
}
]
}
工作演示
我们这里有一个工作工作室演示以及一个内联示例。
// window.onload event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
// Javascript code to execute after DOM content
// render chart with width and height to
// fill the parent container CSS dimensions
zingchart.render({
id: 'myChart',
dataurl: 'https://cdn.zingchart.com/datasets/remote-config.json',
height: '100%',
width: '100%'
});
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.chart--container {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref { display:none; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Blank Grid</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<!-- CHART CONTAINER -->
<div id="myChart" class="chart--container">
<a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
</div>
</body>
</html>