redux React ApexCharts不会在X轴上显示类别数据

jm2pwxwz  于 2022-11-24  发布在  React
关注(0)|答案(1)|浏览(156)

说明

我正在使用redux来更新提供给React JS网页面板中图表的值。问题是当我从时间序列切换到类别时,X轴上的类别消失了。
这是我的代码。Component.js
<Chart options={this.props.options} series={this.props.series} type="area" height="387" />
在reducer中,我像这样修改数据,

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 }]
      };

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


Categories对象为空,后者为系列对象数据。

这显示了图形。


这显示了记录的类别对象和系列对象

这里x轴元素(类别)不会显示。静态完成后我可以看到x轴元素。

bxjv4tth

bxjv4tth1#

如果有人看到这个,我也有同样的问题,正如Divye所建议的,它确实是JSON〉Object〉Arrays的格式。我的,虽然是数字值,但实际上是一个字符串,当我使用下面的转换它们时,图表按预期更新。

// set up array
let flow = []
// extract the key data from the JSON
Object.entries(JSONDATA.OBJECT).forEach(([key, value]) => {
          // console.log(key)
          flow.push(value)
          // console.log(`${key} ${value}`)
        })
// CONVERT TO INT
flow = flow.map(Number)

相关问题