Question

我正在尝试从网上看到的示例（http://fperucic.github.io/treant-js/examples/basic-example/）中使用Treant.js绘制自上而下的组织结构图。

我在 index.html 文件中添加了必要的 CSS 和 JS 文件。我的代码如下所示；

index.html

<!-- added in the HEAD of index.html -->
<link rel="stylesheet" href="assets/css/Treant.css">
<link rel="stylesheet" href="assets/css/basic-example.css">

<!-- added above the build/polyfills.js, build/vendor.js & build/main.js files -->
<script src="assets/js/raphael.js"></script>
<script src="assets/js/Treant.js"></script>
<script src="assets/js/basic-example.js"></script>
<script>
  new Treant( chart_config );
</script>

chart.html

<ion-header>
 <ion-navbar>
  <ion-title>Organisation Structure</ion-title>
 </ion-navbar>
</ion-header>


<ion-content>
  <div class="chart" id="basic-example"></div>
</ion-content>

chart.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-chart',
  templateUrl: 'chart.html',
})       
export class ChartPage {

    constructor(public navCtrl: NavController) {}
}

但是，当我运行 离子服务 命令时，出现了运行时错误提示

Failed to find element by selector "#basic-example"

basic-example.js 文件源包含特定的选择器（https://github.com/fperucic/treant-js/blob/master/examples/basic-example/basic-example.js）。

如何获取要通过 index.html 文件链接的 basic-example.js 文件，以查看＃basic-example chart.html 文件中的strong>选择器？

在Ionic 3中使用Treant.js绘制组织结构图

0 个答案: