首页 文章

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

提问于
浏览 次
0

我正在使用react-chartjs库在React.js中创建条形图 . 我能够显示条形图，但由于我的数据很大，每10秒收集一次 . 条形图显示类似的东西

Bar chart image

我的数据集看起来像

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 支持当前版本 .

谢谢你的帮助 .

javascript reactjs charts chart.js react-chartjs

1 回答

  • 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" />

    希望这可以帮助！

    回复于

相关问题