FusionCharts纯JavaScript实现JSON/XML/CSV数据可视化示例咨询

1. 完整可运行的JSON/XML数据展示HTML源码 #

以下代码可直接保存为html文件打开运行，已内嵌所有必要逻辑，无需额外配置：

<!DOCTYPE html>
<html>
<head>
    <title>FusionCharts JSON数据展示</title>
    <!-- 引入FusionCharts核心库 -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        FusionCharts.ready(function () {
            var oilReservesChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'chart-container',
                width: '700',
                height: '400',
                dataFormat: 'json',
                // 此处直接内嵌提供的JSON数据，也可替换为"dataSource": "remote.json"加载外部JSON文件
                dataSource: {
                    "chart": {
                        "caption": "JSON数据可视化图表",
                        "subCaption": "单位：百万桶",
                        "xAxisName": "国家",
                        "yAxisName": "储量 (MMbbl)",
                        "numberSuffix": "K",
                        "theme": "fusion"
                    },
                    "data": [{
                        "label": "波兰",
                        "value": "290"
                    }, {
                        "label": "沙特",
                        "value": "260"
                    }, {
                        "label": "加拿大",
                        "value": "180"
                    }, {
                        "label": "伊朗",
                        "value": "140"
                    }, {
                        "label": "俄罗斯",
                        "value": "115"
                    }, {
                        "label": "阿联酋",
                        "value": "100"
                    }, {
                        "label": "美国",
                        "value": "30"
                    }, {
                        "label": "中国",
                        "value": "30"
                    }]
                }
            });
            oilReservesChart.render();
        });
    </script>
</body>
</html>

若需要加载XML格式数据，仅需将dataFormat属性改为xml，并将dataSource替换为符合FusionCharts规范的XML格式数据即可。

2. 改造后支持CSV数据加载的HTML源码 #

以下代码内置CSV解析逻辑，可直接加载提供的CSV格式数据并渲染图表：

<!DOCTYPE html>
<html>
<head>
    <title>FusionCharts CSV数据展示</title>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        FusionCharts.ready(function () {
            // 提供的CSV原始数据，也可通过fetch方法加载外部csv文件获取
            const csvData = `Polska, Saudi, Kanada, Iran, Russia, UAE, US, China
290,    260,    180,    140,    115,    100, 30, 30`;
            
            // 解析CSV为FusionCharts所需格式
            const csvLines = csvData.trim().split('\n');
            const labels = csvLines[0].split(',').map(item => item.trim());
            const values = csvLines[1].split(',').map(item => item.trim());
            const chartData = labels.map((label, index) => {
                return {
                    label: label,
                    value: values[index]
                }
            });

            var oilReservesChart = new FusionCharts({
                type: 'column2d',
                renderAt: 'chart-container',
                width: '700',
                height: '400',
                dataFormat: 'json',
                dataSource: {
                    "chart": {
                        "caption": "CSV数据可视化图表",
                        "subCaption": "单位：百万桶",
                        "xAxisName": "国家",
                        "yAxisName": "储量 (MMbbl)",
                        "numberSuffix": "K",
                        "theme": "fusion"
                    },
                    "data": chartData
                }
            });
            oilReservesChart.render();
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Sieciowy