使用React.js -chartjs在条形图中显示最新标签

Question

我正在使用react-chartjs库在React.js中创建条形图。我可以显示条形图，但因为我的数据很大，而且每10秒收集一次。条形图显示的内容如下

​

​

我的数据集如下所示

var loadData = [{
    options: {
        elements: {
            rectangle: {
              borderWidth: 2,
              borderColor: 'rgb(0, 255, 0)',
              borderSkipped: 'bottom'
            }
        },
        responsive: true,
        legend: {
            position: 'top'
        },
        title: {
            display: true,
            text: 'ETL Load Chart'
        },
        scales: {
            xAxes: [{
                type: 'time',
                ticks: {
                    autoSkip:true,
                    maxTicksLimit:20
                }
           }]
        }
    },
    data: {
        labels: [],
        datasets: [
            {

                backgroundColor: "rgba(220,220,220,0.5)",
                data: []
            }
        ]
    }
}]

我正在一个库的不变性帮助下更新数据

case 'GET_LOAD_DATA_RECEIVED': 
            var payload = action.data.payload
            var dataValues = [], labelValues = [];
            payload.forEach(function(item){
                dataValues.push(parseInt(item['recs_upd']) + 1);
                labelValues.push(item['from_ts']);
            })
            return update(state, {
                0: {
                    data: {
                        labels: {
                            $push: labelValues
                        },
                        datasets: {
                            0: {
                                data: {
                                    $push: dataValues
                                }
                            }
                        }   
                    }
                }
            })
            break;

我将图表的渲染称为

<Bar data={this.props.loadInfo[0].data} options={this.props.loadInfo[0].options} width="600" height="250" />

我正在使用"react-chartjs": "^0.8.0"，"chart.js": "^1.1.1"我无法在chart.js中更新到2.0，因为我看到有一个叫做showXlabels的东西存在，因为react-chartjs支持当前版本。

谢谢你的帮助。

Answer 1

每10秒仅传递最新的n数量的数据。

const updatedData = {...this.props.loadInfo[0]}

const newData = {
  data: {
    labels: [...updatedData.labels].reverse().slice(0, 30).reverse(),
    datasets: [...updatedData.datasets].reverse().slice(0, 30).reverse(),
  }
}

const newLimitedData = {...updatedData, ...newData }

<Bar data={newLimitedData.data} options={newLimitedData.options} width="600" height="250" />

希望这能有所帮助！