我是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"
}
}
运行此命令时,我没有得到任何错误,但只有空白-不确定我缺少什么-任何帮助将不胜感激。
答案 0 :(得分: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;
如果要在其中添加一些内容,请在这里link。
答案 1 :(得分:0)
看起来您的插件路径需要修复
<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">