plotly / plotly/angular-plotly.js
Plotly table is not working
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 242
- Forks
- 81
- Merge moyen
- 8 h 48 min
- PR mergées (30 j)
- 18
Description
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">
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par reproduire le tableau vide de app.module.ts, app.component.ts et app.component.html en utilisant la configuration PlotlyViaCDNModule présentée et les données du tableau. Comparez-le aux exemples fonctionnels de graphiques linéaires ou de dispersion ; l’issue est terminée lorsque le tableau fourni s’affiche correctement dans le composant Angular.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 3/5
- Temps estimé
- 1-2 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 42/100