javascript - TypeError:无法读取未定义的属性“栏”
问题描述
无法显示条形图。
我有一个包含数据的表,它是可拖动的。在表格旁边,我有一个两个下拉框,从表格中拖动数据可以拖放到框中。将数据拖放到框后,条形图应显示。
这是我的home.component.html
<div class="placeholders">
<!--Drag Function-->
<div class="box1"
cdkDropList
#productList="cdkDropList"
[cdkDropListConnectedTo]="[dropList1,dropList2]"
[cdkDropListData]="products"
(cdkDropListDropped)="drop($event)"
>
<div class = "table">
<table class="table table-hover">
<thead>
<tr>
<th>ProductName</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr *ngFor = 'let product of products' cdkDrag>
<td>{{product.productName}}</td>
<td>{{product.sales}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--Dropbox-->
<div class="box2"
cdkDropList
#dropList1="cdkDropList"
[cdkDropListData]="items"
(cdkDropListDropped)="drop($event)"
[cdkDropListConnectedTo]="[productList]"
>
<div *ngFor="let item of items">
{{item.productName}} {{item.sales}}
</div>
</div>
<div class="box3"
cdkDropList
#dropList2="cdkDropList"
[cdkDropListData]="values"
(cdkDropListDropped)="drop($event)"
[cdkDropListConnectedTo]="[productList]"
>
<div *ngFor="let item of values">
{{item.productName}} {{item.sales}}
</div>
</div>
</div>
这是我的home.component.ts
export class HomeComponent implements OnInit {
@ViewChild(barchart) barChart:barchart;
products:any=[];
items:any=[];
values:any=[];
data:any=[];
constructor(private service : ServiceService) { }
//Fetching of data
refreshData(){
this.service.getAll().subscribe(res => {
this.products=res;
})
}
drop(event :CdkDragDrop<string[]>){
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data, event.container.data , event.previousIndex, event.currentIndex);
this.barChart.bar(event.container.data,event.container.id);
}
}
ngOnInit() {
this.refreshData();
}
}
这是我的bar.ts
import * as d3 from 'd3';
export class barchart{
data=[];
margin = {top: 10, right: 20, bottom: 30, left: 40};
bar(value, id) {
d3.selectAll("svg").remove();
this.data =value;
const svg = d3
.select(id)
.append('svg')
.attr('width',150)
.attr('height',150)
const contentWidth = 200;
const contentHeight = 120;
const x = d3
.scaleBand()
.rangeRound([0, contentWidth])
.padding(0.1)
.domain(this.data.map(d => d.productName));
const y = d3
.scaleLinear()
.rangeRound([contentHeight, 0])
.domain([0, d3.max(this.data, d => d.sales)]);
const g = svg.append('g')
.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
g.append('g')
.attr('class','x axis')
.attr('transform', 'translate(0,120)')
.call(d3.axisBottom(x));
g.append('g')
.attr('class', 'y axis')
.call(d3.axisLeft(y))
g.selectAll('.bar')
.data(this.data)
.enter()
.append('rect')
.attr('class', 'bar')
.attr("fill",'steelblue')
.on('mouseover', function(d) {
d3.select(this)
.attr('fill', '#3e8e41');
})
.on('mouseout',function(d){
d3.select(this)
.attr('fill','steelblue')
})
.attr('x', d => x(d.productName))
.attr('y', d => y(d.sales))
.attr('width', x.bandwidth())
.attr('height', d => contentHeight - y(d.sales));
}
}
在拖放数据时,必须在 Dropbox 上显示特定的图表。
解决方案
我的猜测是你根本不应该使用@ViewChild
。@ViewChild property decorator
可以在视图 DOM 中查找与选择器匹配的元素或指令,但您的代码看起来好像barchart
在html
. this.barchart
总是如此undefined
。不过,您有一个barchart
可以使用的类。您应该创建一个实例barchart
并调用bar
:
// home.component.ts
// import your barchar class
import { barchart } from './pathtobarchart';
_barchart: barchart;
constructor(private service : ServiceService) {
// create an instance of barchart class,
// so you can use it inside the methods of
// your HomeComponent
this._barchart = new barchart();
}
drop(event :CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex,
event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data, event.container.data , event.previousIndex, event.currentIndex);
this._barchart.bar(event.container.data,event.container.id);
}
}
推荐阅读
- python - 优化代码:仅返回 python 列表的最高版本文件名
- google-cloud-platform - GCP Cloud SDK 在 MAC 中安装失败
- python - wxPython 网格小部件底部和网格边框内的不需要的空间
- angular - 在 Angular 中使用 FontAwesome Pro
- laravel - Laravel show 方法输出空对象
- python - 在 python trie 中存储字数
- reactjs - 减速器未执行
- javascript - 手机屏幕上的菜单有问题
- angular - Angular Material 微调器不适用于同步调用
- nuget - Squirrel 中的 NuGet 框架定位