在Fusioncharts和纯JavaScript示例中显示JSON、XML、CSV数据

vmdwslir 于 2023-09-27 发布在 Java

关注(0)|答案(2)|浏览(87)

有一个供应商示例用于从JSON或XML绘制数据：fusion charts
我是一个总的初学者，不能使正常工作，所以有2个问题：
1.你能给我贴一个完整的HTML页面源代码与JScript嵌入正确显示JSON和XML数据的例子，而它的样本页面上失踪？
1.有人可以改变上述/完整的HTML网页显示CSV数据从一个类似的文件？
干杯
顺便说一句-数据：

- 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

来源：https://stackoverflow.com/questions/69687864/display-json-xml-csv-data-in-fusioncharts-and-pure-javascript-example

2条答案

按热度按时间

gstyhher1#

好吧，我得到了这个解决方案的工作示例，但它不是由供应商/教程作者提出的方法，所以尽管下面的问题仍然存在，如何运行确切的教程方法以及如何从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。谢谢。

赞(0）回复(0）举报 2023-09-27

jxct1oxe2#

// 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
参考-https://www.fusioncharts.com/dev/fusioncharts-aspnet-visualization/data-engine/data-engine-api#csv-file

赞(0）回复(0）举报 2023-09-27

我来回答

在Fusioncharts和纯JavaScript示例中显示JSON、XML、CSV数据

2条答案

相关问题

热门标签

最新问答