plotly / plotly/angular-plotly.js

Plotly table is not working

Đang mở
#169 2 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Ngôn ngữ chính
TypeScript
Star
242
Fork
81
Merge trung bình
8 giờ 48 phút
Pull request đã merge (30 ngày)
18

Mô tả

Problem Overview

  • plotly table is showing a blank chart in Angular solution
  • Note: I have tried the same thing a month back with plotly version 2.2.1 and it was working fine.

Steps Followed

  • Installed plotly in an Angular solution with below commands
    npm install plotly.js-dist --save
    npm install @types/plotly.js --save
    npm install @types/d3 --save

  • Rename folder "plotly.js" to "plotly.js-dist" in "node_modules/@types".

Line/Scatter plots works fine with this approach. However, table is showing an empty graph.

Also, tried with PlotlyViaCDNModule - still the issue is same

Below is how the angular component & module files

app.module.ts

import { PlotlyViaCDNModule } from 'angular-plotly.js';
import { CommonModule } from '@angular/common';

PlotlyViaCDNModule.setPlotlyVersion('1.55.2'); // can be latest or any version number (i.e.: '1.40.0')
PlotlyViaCDNModule.setPlotlyBundle('basic');
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PlotlyViaCDNModule,
CommonModule
],

app.component.ts

export class AppComponent {
public values = [
['Salaries', 'Office', 'Merchandise', 'Legal', 'TOTAL'],
[1200000, 20000, 80000, 2000, 12120000],
[1300000, 20000, 70000, 2000, 130902000],
[1300000, 20000, 120000, 2000, 131222000],
[1400000, 20000, 90000, 2000, 14102000]]

public data = [{
type: 'table',
header: {
values: [["EXPENSES"], ["Q1"],
["Q2"], ["Q3"], ["Q4"]],
align: "center",
line: {width: 1, color: 'black'},
fill: {color: "grey"},
font: {family: "Arial", size: 12, color: "white"}
},
cells: {
values: this.values,
align: "center",
line: {color: "black", width: 1},
font: {family: "Arial", size: 11, color: ["black"]}
}
}]

constructor() {

}

}

app.component.html
<plotly-plot [data]="data">

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện bảng trống từ app.module.ts, app.component.ts và app.component.html bằng thiết lập PlotlyViaCDNModule được cung cấp và dữ liệu bảng. So sánh bảng này với các ví dụ biểu đồ đường hoặc biểu đồ phân tán đang hoạt động; issue được hoàn thành khi bảng được cung cấp hiển thị chính xác trong Angular component.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.