使用react-chartjs顯示帶有React.js的條形圖中的最新標籤

我正在使用react-chartjs庫在React.js中創建條形圖。我能夠顯示條形圖，但由於我的數據很大，每10秒收集一次。條形圖顯示類似使用react-chartjs顯示帶有React.js的條形圖中的最新標籤

我爲它的數據集看起來像

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"我無法更新到2.0在chart.js之是我看到的東西叫showXlabels存在，因爲react-chartjs支持當前版本。

感謝您的任何幫助。

來源

2016-11-02 Shubham Khatri

只通過最近的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" />

希望這有助於！

來源

2016-11-02 07:17:33

這是一個選項，但在這種情況下，我將不得不在減速器中登錄以轉儲舊數據，這將變得複雜。我只想用chart.js來實現它。這裏是一個鏈接，它使用chart.js來展示它，但我無法弄清楚如何將它與react-chartjs http://jsbin.com/yitep/5/edit?html,css,js,output一起使用。無論如何感謝您的幫助 –

舊數據將始終在'this.props.loadInfo [0]' –

中可用。確切地說，經過一段時間後將收集太多的數據，這也是不希望的，因爲它沒有在任何地方使用。我猜想，jsbin演示的鏈接沒有這個問題。目前我已經按照你的建議做了同樣的修復。但我希望它是暫時的，我會得到一個很好的答案 –

使用react-chartjs顯示帶有React.js的條形圖中的最新標籤

回答

相關問題