繁体   English   中英

本机脚本图表不显示

Nativescript charts not displaying

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是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"
  }
}

在运行此程序时,我没有得到任何错误,但是只有一个空白区域-不确定我缺少什么-任何帮助将不胜感激。

2 个回复

看起来数据模型没有设置为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;

这是游乐场链接 ,以防您想要添加一些东西。

看起来您的插件路径需要修复

<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">
1 本机脚本-图表未显示

我遵循nativescript-ui-samples-angular https://github.com/NativeScript/nativescript-ui-samples-angular并在运行应用程序时可以看到图表。 当我在应用程序中使用相同的代码时,IOS和Android上没有显 ...

2 受保护API的本机脚本图像

我有一个对象“ order”,其属性是图像网址数组。 我试图用他的URL来源创建标签列表,但问题是这些URL位于API服务器后面,我无法直接从标签访问。 我不确定为什么会收到FileNotFoundException而不是Forbidden,但对于此问题并不重要。 我对这个api服务器 ...

3 本机脚本图像未更新

所以我在资源文件中有2张图片。 我在列表视图中有一个Image元素。 点击图像时,应该像这样更新image src属性: 它实际上是在内存中更新,但是除非我滚动离开列表项并返回到列表项,否则结果不会反映出来。 我有一个看起来像这样的二传手: 我想念什么吗? ...

4 Google脚本图表访问属性

首先–我只使用Java Script和Google Apps Script大约一个星期。 我正在尝试自动标记学生完成的许多Google表格。 我的计划是拥有一张Google主表单,其中包含要标记的条件和要授予的标记,如下所示。 这是原版纸的第二张纸 我的查找代码如下:我将这些变量发 ...

6 pyplot 除了基本图形外什么都不显示

pyplot 不听我的任何样式命令,也不显示任何轴刻度。 我从https://www.tutorialspoint.com/matplotlib/matplotlib_bar_plot.htmand复制了这个例子,但不能像他们那样工作,当我添加我的数据时 见输出.png ...

7 在Google Apps脚本图表中对数据进行分组

我正在尝试使用Google Apps脚本构建一个简单的仪表板应用程序,以从Google电子表格中提取数据,然后使用仪表板上的图表直观地显示该数据。 我已经设法执行了这些初始步骤,但是在尝试对数据进行分组以防止将饼图中的多个切片分配给同一任务时遇到问题。 在下面的源电子表格中,您将看到链接 ...

9 D3.js基本图表绘图示例未显示

我是Javascript的新手,想使用D3库在线可视化我的数据。 我在网上发现了很多关于从数据数组中绘制简单条形图的例子。 但是,以下示例不起作用,它只返回一个空白网页: 这可能是源脚本( http://d3js.org/d3.v4.js )或浏览器的问题吗? 任何帮助都不仅仅 ...

10 Chartjs:不显示图表

我正在使用react-chartjs,现在我遇到的问题是我的图表在我的控制台中没有呈现任何错误。 以前,当我安装react-chartjs和chartjs时,始终存在错误Unmet peer dependency: eslint-plugin-jsx-a11y@3.0.2 。 虽然我不确 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM