反応チャートを使ってReact.jsで棒グラフの最新のラベルを表示

Question

私は反応チャートのライブラリを使って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は、現在のバージョンをサポートしているので、私はshowXlabelsが存在していると呼ばれるものを見た私はchart.jsに2.0に更新できませんでした"react-chartjs": "^0.8.0"、および"chart.js": "^1.1.1"を使用しています。

ありがとうございました。

Answer 1

最新のn個のデータのみを10秒ごとに渡します。

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

これが役に立ちます。