有一个供应商示例，用于从 JSON 或 XML 绘制图表数据： 融合图表
我是一个完全的初学者，无法使其正常工作，所以有两个问题：
干杯。
顺便说一句 - 数据：
--- CSV ---
Polska, Saudi, Kanada, Iran, Russia, UAE, US, China
290, 260, 180, 140, 115, 100, 30, 30
---猫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。 谢谢。
// Render a chart and upon click of a button alert the chart's data in
// CSV format.
FusionCharts.ready(function () {
var chart = new FusionCharts({
type: "column2d",
renderAt: "chart-container",
dataSource: "weekly-sales.json",
dataFormat: "jsonurl"
}).render();
// Assign the functionality of retrieving and alerting CSV data to
// click event of a button
document.getElementById("alert-csv-data").onclick = function () {
alert(chart.getChartData("csv"));
};
});
这是演示小提琴 - https://jsfiddle.net/fusioncharts/L486ydop/
要了解有关此功能的更多信息，请参阅本文档中定义所有方法 - https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods