如何在Zingchart中使用我自己的外部数据?

我正在使用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>

工作演示

相关内容

最新更新

热门标签：