我试图用实时数据填充顶点图表，但它从未填充

Question

我正在尝试用从 Angular 服务收集的一些数据填充顶点图表但是出了点问题，我不知道到底是什么

获取数据的代码：

this.getFloatingPnlData.subscribe((graph_data: any) => {

this.graph_data = graph_data; // brokerBBook brokerGlobal potentialCapture
if (this.graph_data.length > 0) {

    //Adding color property to dataset
    let g_data = [];

        this.graph_data.slice(0, 5).forEach((data, index) => {
                // let test = this.statusService.getFilteredSeries(obj.label)
                let obj = {
                    
                     x: data.floatingPnl,
                     y: data.symbol, 
                };

                g_data.push(obj);

                // console.log(obj.data)
        
        });

        this.apexdataseries = g_data;
    
    this.copyApexdataseries = g_data;
    this.setOptions();
} else {
    console.log("No data was returned");
}
});

如您所见，我正在创建一个名为“obj”的对象，并在每次迭代时将该对象推送到一个数组中。

这张图片显示了一个console.log的数组

问题：

当我尝试将该数组设置为顶点图表系列时，图表保持为空，我不知道为什么：

public setOptions() {
        this.chartOptions = {
             series:[
                this.apexdataseries
              ],
              
            chart:{
            type: "bar",
            height: 400,
            toolbar:{
                show:false
            }
        },

            fill: {
            colors:["#1d77ff","#7c5efd","#07cbe8"],

            type: 'gradient',
            gradient: {
              shade: 'dark',
              type: "vertical",
              shadeIntensity: 0,
              gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
              inverseColors: true,
              opacityFrom: 0.7,
              opacityTo: 0.23,
              stops: [0, 40, 100],
              
            }
        },

        stroke:{
            show: true,
            curve: 'smooth',
            colors:["#1d77ff","#7c5efd","#07cbe8"],
            width: 1,
            dashArray: 0,      

        },

            xaxis: {
                type:'category',
                
                  labels:{
                      show: true,
                 }
            },
            plotOptions:{
                bar:{
                    barHeight: '100%',
                    borderRadius: 2,
                    colors:{
                        backgroundBarOpacity: 0.5,
                        backgroundBarRadius: 8
                    }
                },
                
            },
            title:{
                text: "Placeholder chart"
            },
            dataLabels: {
                enabled: false,
                offsetX: -6,
                style: {
                  fontSize: '12px',
                  colors:['#F44336', '#E91E63', '#9C27B0'],
                },
            }
    
        };
    }

Answer 1

如果您浏览他们网站 (here) 上的 angular 示例，您会看到 series 字段是一个对象数组，每个对象都有一个 name（字符串）和 data（数组）字段。

constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
    ............

但是在你的代码中你有

let g_data = [];
................
this.apexdataseries = g_data;

所以很可能您没有提供预期的数据结构。如果您这样更改它应该会修复它：

public setOptions() {
        this.chartOptions = {
             series:[{
                 name: 'Some-series',
                 data: this.apexdataseries
             }],

我试图用实时数据填充顶点图表，但它从未填充

Im trying to fill an apex chart with real time data but it never fills

angular

apexcharts