Oracle JET - 使用 JSON 数据创建图表

Question

我正在尝试用一些 JSON 数据填充饼图。我的数据源是 restcountries.eu/rest/v2/all。我使用 $.getJSON 检索数据并创建一个临时数组，该数组又用作数据源。然后我将源绑定到饼图。我认为我至少正在做的事情..

我得到的错误如下

my-piechart-viewModel.js:25 Uncaught (in promise) ReferenceError: data is not defined at new myPieChartModel (my-piechart-viewModel.js:25) at Object.CreateComponent (ojcomposite.js:1808) at ojcustomelement.js:385

我的代码如下所示

HTML

<oj-chart id="pieChart1" aria-label= 'TestPieChart'
          type="pie"
          series='[[datasource]]'
          style="max-width:500px;width:100%;height:350px;">
</oj-chart>

JS

function myPieChartModel() {
            var self = this;        
            self.data = ko.observableArray();
            $.getJSON("https://restcountries.eu/rest/v2/all").
                then(function(countries) {
                    var tempArray = [];
                    $.each(countries, function() {
                        tempArray.push({
                            name: this.name, 
                            population: this.population
                        });
                    });
                    self.data(tempArray);
            });
            self.datasource = ko.observableArray(data);
        }
    return myPieChartModel;

我做错了什么？我对 Oracle 的 JET 很陌生，总体上我对 JSON 的经验很少。

Answer 1

如果您将某些内容定义为 self.data，您以后将无法通过仅调用 data 来访问它。因此，您需要将最后一行更改为：

self.datasource = ko.observableArray(self.data);

即使你这样做，你也会得到这个错误：

The argument passed when initializing an observable array must be an array, or null, or undefined.

也就是说，您不能将 observableArray 传递给 observableArray。 self.data 应该只是一个普通的 JS 数组。

self.data = [];

但是普通的 JS 数组在其值更改时不会触发任何事件，因此您需要再次更新 observableArray datasource。您的完整代码可以是这样的：

function myPieChartModel() {
        var self = this;        
        self.data = [];
        self.datasource = ko.observableArray(self.data);
        $.getJSON("https://restcountries.eu/rest/v2/all").
            then(function(countries) {
                $.each(countries, function() {
                    self.data.push({
                        name: this.name, 
                        population: this.population
                    });
                });
                self.datasource(self.data);
        });
    }
return myPieChartModel;

如果有效请告诉我。我感觉你的 JSON 数据也需要这样修改：

self.data.push({name: this.name, 
                items: [this.population]
               });

为什么？因为这正是 Oracle JET 所期望的。这是 documentation.

Oracle JET - 使用 JSON 数据创建图表

Oracle JET - Creating chart with JSON-data

html

javascript

knockout.js

oracle-jet