Angular项目中ApexChart绑定服务返回实时数据后无内容展示问题

问题排查与修正 #

核心错误点 #

• series配置格式不符合ApexChart要求：ApexChart的series字段要求为[{name: '系列名', data: 数据数组}]结构，你直接把数据数组嵌套在series数组中，组件无法识别有效数据。
• 数据对象属性与坐标轴配置不匹配：你将x轴设为category分类类型，对应值应该是交易对标识symbol，数值对应y轴的floatingPnl，当前代码中x、y属性赋值颠倒。
• Angular变更检测适配问题：ng-apexcharts默认不会监听配置对象的深层属性变更，直接重赋值chartOptions可能不会触发图表重新渲染。

修正后的代码 #

数据处理部分

this.getFloatingPnlData.subscribe((graph_data: any) => {
  this.graph_data = graph_data;
  if (this.graph_data.length > 0) {
    let g_data = [];
    this.graph_data.slice(0, 5).forEach((data, index) => {
      let obj = {
        x: data.symbol, // 分类值匹配category类型x轴
        y: data.floatingPnl // 数值匹配数值类型y轴
      };
      g_data.push(obj);
    });
    this.apexdataseries = g_data;
    this.copyApexdataseries = g_data;
    this.setOptions();
    // 手动触发图表更新，避免Angular变更检测不生效
    this.chart?.updateSeries([{
      name: '浮动盈亏',
      data: this.apexdataseries
    }]);
  } else {
    console.log("No data was returned");
  }
});

setOptions配置部分

public setOptions() {
  this.chartOptions = {
    series: [
      {
        name: "浮动盈亏", // 补全系列必填字段
        data: this.apexdataseries // 数据放入data字段中
      }
    ],
    chart:{
      type: "bar",
      height: 400,
      toolbar:{
        show:false
      }
      // 如需横向柱状图，打开下一行配置即可
      // horizontal: true
    },
    fill: {
      colors:["#1d77ff","#7c5efd","#07cbe8"],
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: "vertical",
        shadeIntensity: 0,
        gradientToColors: undefined,
        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'],
      },
    }
  };
}

额外说明 #

如果你使用横向柱状图，仅需要在chart配置项中新增horizontal: true即可，不需要调整x、y的赋值逻辑。

内容的提问来源于stack exchange，提问作者Castle