首页 > 解决方案 > 如何在 ng-charts 上创建动态数据集

问题描述

我在我的项目中使用 ng2-Charts,我可以创建具有固定数据集的图表(例如:我可以创建 3 行图表)。但是我想创建一个堆积条形图,即使我能够创建这个图表,但我无法动态创建数据集。

条形图会动态变化,一次会有两个条形图(堆叠),另一次将是 5 个,它纯粹是基于用户的。

我试过下面的代码。

       getChartdata(){
         //datainfo is response coming from API
          let data_arry:any =[];
          let data_obj:any ={};   
          let time_period:any = ["sun", "mon", "the", "wed", "the", "fri", "sat"];
          for(let key of datainfo){
             data_obj['data'] = [1,2,3,4]
             data_obj['stack'] = 'a';
             data_obj['barPercentage'] = 0.5;
             data_obj['barThickness'] = 30;
             data_arry.push(data_obj)
           }
          this.StringChart(data_arry, time_period)
       }





        StringChart(data_arry:any, time_period:any) {                
             var  Tooltip_options: any = {
                              maintainAspectRatio: false,
                            
                              scales: {
                                 yAxes: [{
                                     barPercentage: 1.6,
                                     gridLines: {
                                         drawBorder: false,
                                         color: 'rgba(29,140,248,0.0)',
                                         zeroLineColor: "transparent",
                                      },
  
                                  }],

                                  xAxes: [{
                                     barPercentage: 1.6,
                                     gridLines: {
                                        drawBorder: false,
                                        color: 'rgba(0,242,195,0.1)',
                                        zeroLineColor: "transparent",
                                     },
                                    ticks: {
                                         padding: 20,
                                         fontColor: "#9e9e9e"
                                     }
                                   }]
                        }
                     };


           this.LC_Data  = data_arry;

           this.LC_Labels  = time_period;
            this.LC_Options = Tooltip_options;

            }

当我执行 console.log 时,它显示了一个对象数组,但看不到图表,我收到以下错误:

          ERROR TypeError: labels.slice is not a function

标签: angularng2-charts

解决方案


推荐阅读