在Fusioncharts和纯JAVASCRIPT示例中显示JSON, XML, CSV数据



有一个从JSON或XML绘制数据的供应商示例:融合图

我是一个完全的初学者,不能使它正常工作,所以有两个问题:

  1. 你能给我一个完整的HTML页面源代码与JScript嵌入正确显示JSON和XML数据示例,而它在样本页面上缺失?
  2. 有人可以改变提到/完整的HTML网页显示CSV数据从类似的文件?

欢呼。

btw - data:

—CSV—

Polska, Saudi, Kanada, Iran, Russia, UAE, US, China
290,    260,    180,    140,    115,    100, 30, 30

——cat remote。json -

{
// Chart Configuration
"chart": {
"caption": "Wykres danych z pliku JSON",
"subCaption": "In MMbbl = One Million barrels",
"xAxisName": "Country",
"yAxisName": "Reserves (MMbbl)",
"numberSuffix": "K",
"theme": "fusion",
},
// Chart Data
"data": [{
"label": "Polska",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Kanada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}]
}

好的,我通过这个解决方法得到了一个工作示例,但它不是由教程的供应商/作者提出的方法,所以尽管有以下问题仍然存在,如何运行确切的教程方法以及如何从CSV

中绘制它工作理念:

与JSON

{
"chart": {
"caption": "Wykres danych z pliku JSON",
"subCaption": "Jakiś bardzo szczegółowy opis tych danych...",
"xAxisName": "Kraj",
"yAxisName": "Mierzona wartość z pliku JSON",
"numberSuffix": "K",
"theme": "fusion"
},
"data": [{
"label": "Polska",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Kanada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "130"
}, {
"label": "China",
"value": "80"
}]
}

HTML和

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Przykład wykresu dla mnie</title>
<!-- Include fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Include fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
// TO JEST PIERWSZY WYKRES i ŁADOWANIE DANYCH z INNEGO pliku JSON:
const chartConfig = {
type: 'column3d',
renderAt: 'chart-container',
width: '80%',
height: '450',
dataFormat: 'jsonurl',
dataSource: 'wykresy4remote.json'
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</script>
</head>
<body>
<center>
<div id="chart-container">FusionCharts XT will load here!</div>
</center>
</body>
</html>

请建议,如何做得更好,也与CSV。Thx .

最新更新