ChartJS Charts.js转换负数数据

fjaof16o  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(238)

在我的长条图中,我得到一组数字做为数据。一个是收入,另一个是支出。我想将两者都显示为正数,以便于比较。问题是,我不知道在何处将支出数据转换成正数。
我已经在ngOnInit中使用Math.abs(this.barData[1])尝试过了,但是我得到了类型错误:类型为'(number)的参数|散点图数据点|BubbleDataPoint)[]'无法指派给型别' number '的参数。
有人能帮帮我吗?

  1. barLabel = ["13.03.2022"];
  2. barData = [[645.54], [- 114.24]];
  3. @Input() barData!: (number | ScatterDataPoint | BubbleDataPoint)[][];
  4. @Input() barLabel!: string[];
  5. public barChartType: ChartType = "bar";
  6. public barChartData: ChartConfiguration["data"];
  7. defaultBarChartData: Partial<ChartConfiguration['data']>;
  8. ngOnInit(): void {
  9. this.defaultBarChartData = {
  10. labels: this.barLabel,
  11. datasets: [
  12. {
  13. data: this.barData[0],
  14. label: "Income",
  15. backgroundColor: "#3ABD32",
  16. },
  17. {
  18. data: this.barData[1],
  19. label: "Expense",
  20. backgroundColor: "#E02A45",
  21. },
  22. ],
  23. };
  24. if (
  25. this.barData !== undefined &&
  26. this.barLabels !== undefined &&
  27. Array.isArray(this.barData) &&
  28. this.barData.length > 0 &&
  29. Array.isArray(this.barLabels) &&
  30. this.barLabels.length > 0
  31. )
  32. {
  33. this.barChartData = {
  34. ...this.defaultBarChartData,
  35. ...{ labels: [" "] },
  36. } as ChartConfiguration['data'];
  37. this.barChartData.datasets[0].data = this.barData[0];
  38. } else {
  39. throw new Error('Charts must have their data and labels inputs defined.');
  40. }
  41. }
  42. public barChartOptions: ChartConfiguration["options"] = {...}
5lwkijsr

5lwkijsr1#

根据ts声明,Math.abs需要输入一个数字。所以你需要在数组后面指定[0]来得到这个数字。然后你需要再次把它变成一个数组,因为chart.js需要一个数组。所以你的代码看起来像这样:

  1. barLabel = ["13.03.2022"];
  2. barData = [[645.54], [- 114.24]];
  3. @Input() barData!: (number | ScatterDataPoint | BubbleDataPoint)[][];
  4. @Input() barLabel!: string[];
  5. public barChartType: ChartType = "bar";
  6. public barChartData: ChartConfiguration["data"];
  7. defaultBarChartData: Partial<ChartConfiguration['data']>;
  8. ngOnInit(): void {
  9. this.defaultBarChartData = {
  10. labels: this.barLabel,
  11. datasets: [
  12. {
  13. data: [Math.abs(this.barData[0][0])],
  14. label: "Income",
  15. backgroundColor: "#3ABD32",
  16. },
  17. {
  18. data: [Math.abs(this.barData[1][0])],
  19. label: "Expense",
  20. backgroundColor: "#E02A45",
  21. },
  22. ],
  23. };
  24. if (
  25. this.barData !== undefined &&
  26. this.barLabels !== undefined &&
  27. Array.isArray(this.barData) &&
  28. this.barData.length > 0 &&
  29. Array.isArray(this.barLabels) &&
  30. this.barLabels.length > 0
  31. )
  32. {
  33. this.barChartData = {
  34. ...this.defaultBarChartData,
  35. ...{ labels: [" "] },
  36. } as ChartConfiguration['data'];
  37. this.barChartData.datasets[0].data = this.barData[0];
  38. } else {
  39. throw new Error('Charts must have their data and labels inputs defined.');
  40. }
  41. }
  42. public barChartOptions: ChartConfiguration["options"] = {...}
展开查看全部

相关问题