Question

无法显示条形图。

我有一个包含数据的表，该表是可拖动的。在表格旁边，我有两个保管箱，可以将表格中的数据拖放到该保管箱中。将数据拖放到保管箱中时，条形图应显示。

这是我的 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));
  }
}

在拖放数据时，必须在下拉框中显示特定的图表。

Answer 1

问题：

drop(event :CdkDragDrop<string[]>){ 
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    console.log("different container");
    transferArrayItem(event.previousContainer.data, event.container.data , event.previousIndex, event.currentIndex);  
    console.log(event.container.id);
    console.log(event.container)
    this.barChart.bar(event.container.data,event.container.id); <-- problem
  }  
}

修复：

drop(event :CdkDragDrop<string[]>){ 
  if (event.previousContainer === event.container) {
    moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
  } else {
    console.log("different container");
    transferArrayItem(event.previousContainer.data, event.container.data , event.previousIndex, event.currentIndex);  
    console.log(event.container.id);
    console.log(event.container)
    barChart.bar(event.container.data,event.container.id); <-- fix
  }  
}

Answer 2

我的猜测是，您根本不应该使用@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);
  }  
}

TypeError：无法读取未定义的属性“ bar”

2 个答案: