本機腳本圖表不顯示

Question

我是Nativescript的新手，目前正在使用javascript進行Nativescript項目。 我正在探索圖表選項，並已使用“ tns插件添加nativescript-ui-chart”命令安裝了nativescript UI圖表。 當我嘗試顯示簡單的折線圖時，我沒有收到任何錯誤，但是也沒有任何顯示。

這是我的XML文件：

<Page class="page coverImage" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="nativescript-ui-chart">
<Label text="Test Charts Page"></Label>
<StackLayout>    
<Label text="Test"></Label>
     <chart:RadCartesianChart class="m-t-10" height="500">
      <chart:RadCartesianChart.series>
        <chart:LineSeries
          items="{{ animeData }}"
          categoryProperty="season"
          valueProperty="count">
          <chart:LineSeries.horizontalAxis>
            <chart:CategoricalAxis labelFitMode="Rotate" />
          </chart:LineSeries.horizontalAxis>
          <chart:LineSeries.verticalAxis>
            <chart:LinearAxis labelLayoutMode="Outer" />
          </chart:LineSeries.verticalAxis>
        </chart:LineSeries>
      </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
  </StackLayout>
</Page>

我的JavaScript文件：

   var frameModule = require("ui/frame");
var Observable = require("data/observable").Observable;  
var pageData = new Observable();
pageData.animeData = [
 { season: "1", count: 82 }, { season: "2", count: 36 }, { season: "3", count: 41 },
 { season: "4", count: 52 }, { season: "5", count: 65 }, { season: "6", count: 40 },
 { season: "7", count: 52 }, { season: "8", count: 54 }, { season: "9", count: 47 },
 { season: "10", count: 52 }, { season: "11", count: 52 }, { season: "12", count: 53 },
 { season: "13", count: 34 }, { season: "14", count: 48 }, { season: "15", count: 49 },
 { season: "16", count: 45 }, { season: "17", count: 48 }, { season: "18", count: 45 },
 { season: "19", count: 47 }
];
exports.pageLoaded = function(args) 
{
     var page = args.object;
     page.bindingContext = pageData;
};

我已將nativescript-ui-chart添加到bundle.config中，如下所示：

global.registerModule("nativescript-ui-chart",
        () => require("../node_modules/nativescript-ui-chart"))

的package.json：

   {
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.pregapp4",
    "tns-ios": {
      "version": "4.0.1"
    }
  },
  "scripts": {
    "lint": "eslint \"app/**/*.js\""
  },
  "dependencies": {
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-chart": "^3.9.1",
    "nativescript-ui-dataform": "^3.7.3",
    "nativescript-ui-listview": "^3.7.2",
    "nativescript-ui-sidedrawer": "^4.3.1",
    "tns-core-modules": "^5.0.2"
  },
  "devDependencies": {
    "eslint": "~4.9.0",
    "nativescript-dev-sass": "~1.5.0",
    "nativescript-dev-webpack": "~0.10.0",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.3.0",
    "raw-loader": "~0.5.1",
    "css-loader": "~0.28.7",
    "nativescript-worker-loader": "~0.8.1",
    "resolve-url-loader": "~2.2.1",
    "extract-text-webpack-plugin": "~3.0.2",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "sass-loader": "~6.0.6"
  }
}

在運行此程序時，我沒有得到任何錯誤，但是只有一個空白區域-不確定我缺少什么-任何幫助將不勝感激。

Answer 1

看起來數據模型沒有設置為Observable。 我已將代碼更改為以下代碼，因為它在ios上運行正常。

var observableModule = require("tns-core-modules/data/observable");

function HomeViewModel() {
  var viewModel = observableModule.fromObject({
    animeData: [
      { season: "1", count: 82 }, { season: "2", count: 36 }, { season: "3", count: 41 },
      { season: "4", count: 52 }, { season: "5", count: 65 }, { season: "6", count: 40 },
      { season: "7", count: 52 }, { season: "8", count: 54 }, { season: "9", count: 47 },
      { season: "10", count: 52 }, { season: "11", count: 52 }, { season: "12", count: 53 },
      { season: "13", count: 34 }, { season: "14", count: 48 }, { season: "15", count: 49 },
      { season: "16", count: 45 }, { season: "17", count: 48 }, { season: "18", count: 45 },
      { season: "19", count: 47 }
    ],


  });

  return viewModel;
}

module.exports = HomeViewModel;

這是游樂場鏈接 ，以防您想要添加一些東西。

Answer 2

看起來您的插件路徑需要修復

<Page class="page coverImage" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="nativescript ui-chart">

應該是

<Page class="page coverImage" navigatingTo="onNavigatingTo" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:chart="nativescript-ui-chart">