首页 > 解决方案 > React ApexCharts 不会在 X 轴上显示类别数据

问题描述

解释

我正在使用 redux 更新提供给 React JS Web 面板中图表的值。问题是当我从时间序列转移到类别时,x 轴上的类别消失了。

这是我的代码。组件.js

<Chart options={this.props.options} series={this.props.series} type="area" height="387" />

在减速器中,我像这样更改我的数据,

      console.log(action.categories); //categories in chart
      console.log(action.chartData); //series component in chart
      return { ...state,
        unique_visitors: action.payload,
        loading_unique_visitors: false,
        chartData: action.chartData,
        timeData: action.timeData,
        categories: action.categories,
        options: {
          ...state.options,
          xaxis: {
            ...state.options.xaxis,
            categories: action.categories,
            type: _.isEmpty(action.categories) ?  'datetime' : '',
          }
        },
        series: [{ name: 'unique visitors', data: action.chartData }]
      };

我记录了发送到图表组件的系列对象和类别对象,图表应该根据所选的时间段、每月、每周等进行更新。

截图 2019-07-06 在 2 17 52 PM 类别对象为空,后者为系列对象数据。 截图 2019-07-06 在 2 21 44 PM 这显示了图表。

截图 2019-07-06 在 2 16 08 PM 这显示了记录的类别对象和系列对象 截图 2019-07-06 在 2 16 31 PM 这里 x 轴元素(类别)不会显示。静态完成后,我可以看到 x 轴元素。

标签: javascriptreactjsreduxreact-reduxapexcharts

解决方案


推荐阅读