- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我有一个最初有 2 页的选项卡项目。我试图让条形图显示在其中一页上,但什么也没有出现。所以,我创建了第三个页面来简单地进行图表测试。我直接从 ng-2charts 中提取示例代码文档,然后将其放入 ionic 组件中。但是,即使在新标签页中也没有任何显示。
这是我的代码:
在 app.ts/html 中显示我正确包含了页面:
//html file
<ion-tabs greenTheme [selectedIndex]="index">
<ion-tab tabIcon="people" #content tabTitle="My Roster" [root]="tab2"></ion-tab>
<ion-tab tabIcon="stats" #content tabTitle="Wage Overview" [root]="tab1"></ion-tab>
<ion-tab tabIcon='stats' #content tabTitle='Chart test' [root]='tab3'></ion-tab>
</ion-tabs>
//.ts file
import {MetricLandingPage} from './pages/metric-landing/metric-landing';
import {Roster} from './pages/roster/roster';
import {GlobalService} from './providers/global-service/global-service';
import {BarChartDemoComponent} from './pages/chart-test/chart-test';
....
//in the constructor
this.tab2 = Roster;
this.tab1 = MetricLandingPage;
this.tab3 = BarChartDemoComponent;
我在实际页面中的代码可以在我上面的链接中找到,但为了速记,我会把它放在这里:
在 chart-test.ts/html 中显示我刚刚复制并粘贴,同时添加了必要的 ionic 标签:
<ion-navbar *navbar greenTheme>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>TEST</ion-title>
<ion-buttons menuToggle='right' end>
<button>
<ion-icon name='add'></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content>
<base-chart class="chart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></base-chart>
</ion-content>
import {Component} from '@angular/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from '@angular/common';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
// webpack html imports
@Component({
selector: 'bar-chart-demo',
templateUrl: 'build/pages/chart-test/chart-test.html',
directives: [CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class BarChartDemoComponent {
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true
};
public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;
public barChartData:any[] = [
{data: [65, 59, 80, 81, 56, 55, 40], label:'Series A'},
{data: [28, 48, 40, 19, 86, 27, 90], label:'Series B'}
];
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
}
图表选项卡的结果如下所示:
最佳答案
确保您还完成了以下操作:
npm install chart.js --save
import '../node_modules/chart.js/dist/Chart.bundle.min.js';
.chart { display: block; height: 100%; }
那么您的图表应该可以工作了。
关于angular - Ionic2 Angular2 : I can't seem to get an ng2-chart to appear in my app,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37752290/
我的 CSS 中有以下代码: header input{ width:100%; height:50px; float:left; color:fff; background: rgba(255,25
我一直在尝试使用外观代理 API 将一些默认颜色应用于某些控件,但我遇到了问题。 当我使用诸如...之类的东西将色调颜色应用到 UISegmentedControl 时 UISegmentedCont
我正在将其他人制作的一个现有的小型 Angular JS 应用程序集成到一个不是使用 Angular 构建的现有网站中。 所有 Angular JS 应用程序文件都保存在一个完全独立的目录中,然后用户
我的应用程序在调用 $(document).ready 后向 DOM 添加一些元素。我正在使用 jQuery 1.9.0 以下示例有效。 $(document).on("click", "#box-d
我是 jquery 方面的大菜鸟,我需要弄清楚如何更改此代码: $('.social li').appear(); $(document.body).on('appear', '.social li'
这个问题在这里已经有了答案: Z-index with before pseudo-element (2 个答案) Is it possible to set the stacking order
尽管MSDN和 MDN声明 IE11 似乎根本不支持 webkit-appearance。尝试将 -webkit-appearance 设置为任何声称支持的值时(none、button、textfie
当我尝试克隆 git 用户 HOME 之外的远程 git 时出现错误。 Cloning into test... fatal: '/media/raid/repo/test.git' does not
谁能明白为什么这个 html 代码不起作用。 当图像变得可见时,它应该显示警报,当图像对用户不可见时,它应该再次显示警报。 它也不适用于本地库。
我正在尝试访问 super 英雄 api,但对于某些数据,它一直显示数据未定义。 var html = ""; $.each(data.results,function(i,results){ ht
我需要编写一个小的正则表达式匹配器,它将匹配任何出现的字符串形式 [a-zA-Z]+(_[a-zA-Z0-9]+)? 如果我使用上面的正则表达式,它会匹配所需的部分,但也会匹配到 4_abc 的 ab
在我的网站上,我有多个组件充当每个单独页面的模板,例如“主页”、“关于我”等……我的目标是在每个页面之间实现滑动过渡,我已经使用过渡标签以及添加的“出现”属性和一些 CSS 实现了这一点。我的问题是,
我正在尝试将两个微调器放入工具栏(我正在使用协调器布局) 代码如下
我想让导航栏在使用关闭按钮关闭时消失,或者在关闭屏幕时让导航栏隐藏。 代码如下: - (void)viewDidLoad { [self.navigationController setNav
这个问题不太可能帮助任何 future 的访客;它只与一个小地理区域、一个特定时刻或一个非常狭窄的情况相关,而这些情况通常不适用于互联网的全局受众。如需帮助使这个问题更广泛地适用,visit the
感谢您阅读这个问题,我是 React 新手,我尝试做一个任务应用程序,所以我这样做。 App.js import React, { Component }from 'react' import Rea
我一直在尝试通过 jQuery 删除-webkit-appearance:none; 但没有任何效果。我尝试了以下方法: jQuery(document).ready(function(){ jQ
我为我的选择框设置了样式,它在 chrome 和 safari 上运行良好。 现在我的问题出在 FF 中,我仍然可以看到带有选择框的下拉箭头。 我试过引用this solutions和 this so
我刚刚自学 HTML 和 CSS,但遇到了我的第一个烦人的错误。 这是我的代码: http://pastebin.com/Rk6TjqKZ 到目前为止,这是我唯一的图像,它曾经出现过,但自从将一个类添
如果我能在任何地方找到这方面的任何信息,我就不会问这个问题。我检查了 w3schools、这个网站和谷歌。什么都没有。 那么,是否有一个 css -ms 等同于 -webkit-appearance?
我是一名优秀的程序员,十分优秀!