0

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: []
            }
        ]
    }
}]

ライブラリの immutability-helpers を使用してデータを更新しています

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;

そして、私はChartのレンダリングを次のように呼び出しています

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

を使用して"react-chartjs": "^0.8.0"いますが、chart.js を"chart.js": "^1.1.1"更新できませんでした。現在のバージョンをサポートしているため、存在2.0するというものを見ました。showXlabelsreact-chartjs

助けてくれてありがとう。

4

1 に答える 1

1

n10 秒ごとに最新の数のデータのみを渡します。

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

お役に立てれば！

于 2016-11-02T07:17:33.403 に答える