使用 React.js 和 Chart.js 来绘制交互式图表
简述/综述
假设有一种页面，图表和表格放在一起。当用户在同一页上新添加数据后，表格会插入新数据，同时图表也会更新。为了实现这样的交互式页面，我尝试在React.js应用程序内部使用Chart.js。它是基于React.js状态数据（this.state）绘制图表的方法。
我没有使用JSX，而是用Rails和CoffeeScript编写了代码。
#环境
Option 1: 环境
-
- ruby 2.2.1
-
- Rails 4.2.3
-
- react-rails
-
- chart-js-rails
-
- bootstrap
-
- font-awesome-rails
- 他
#步骤
在render方法中，我们定义了一个canvas的图形，然后调用之前定义的canvas对象。
# React.DOMの記述を省略するための変数。
R = React.DOM
PieChartCanvas = React.createClass
render: ->
R.canvas
style: { height: 200, width: 200 }
BarChartCanvas = React.createClass
render: ->
R.canvas
style: { height: 200, width: 400 }
記住圖表物件的指標。
由於Chart.js所建立的在畫布上的圖表物件是React.js無法管理的，當整個組件更新時，我們需要自己來銷毀它們。因此，我們需要記住圖表的物件，以便以後可以訪問它們。
@MovingRecordsApp = React.createClass
getInitialState: ->
records: @props.data
# グラフのオブジェクトを覚えておくための変数。
barChartInstance: null
pieChartInstance: null
使用`render()`方法来定义模板。
# React.DOMの記述を省略するための変数。
R = React.DOM
# メインの部品
@MovingRecordsApp = React.createClass
getInitialState: ->
records: @props.data # 外部から供給されるデータ。
# グラフのオブジェクトを覚えておくための変数。
barChartInstance: null
pieChartInstance: null
getDefaultProps: ->
records: []
...
# グラフと額縁のテンプレート
chartsPanel: ->
R.div
className: "panel panel-blue"
R.div
className: 'panel-heading'
R.div
className: "row"
R.div
className: "col-xs-3"
R.div
className: "fa fa-home fa-5x"
R.div
className: "col-xs-9 text-right"
R.div
className: 'huge'
"Total: #{@totalVolume()}"
R.div null,
"cubic feet"
R.div
className: 'panel-body'
R.div
className: 'row text-center'
# 棒グラフ用キャンバス
R.div
className: 'col-sm-6'
React.createElement BarChartCanvas,
ref: "bar" # 後にアクセスするために使用
# 円グラフ用キャンバス
R.div
className: 'col-sm-6'
React.createElement PieChartCanvas,
ref: "chart" # 後にアクセスするために使用
render: ->
R.div
className: "app_wrapper"
# グラフと額縁
R.div null, @chartsPanel()
R.hr null
# 新規作成フォームの部品（この部品についての本題ではないので、詳細は省略しています。）
R.h2 null, "Add a new item"
React.createElement NewMovingRecordForm,
handleNewRecord: @addRecord
roomSuggestions: @props.roomSuggestions
categorySuggestions: @props.categorySuggestions
R.hr null
# 表の部品（この部品についての本題ではないので、詳細は省略しています。）
React.createElement Records,
records: @state.records,
handleDeleteRecord: @deleteRecord,
handleUpdateRecord: @updateRecord
...
使用React.js的生命周期方法，绘制图表。
在React.js中，可以使用生命周期方法，在组件的生命周期特定时刻执行处理。由于Chart.js无法访问React.js内部的虚拟DOM，因此图表绘制会在组件实际添加到DOM后进行。相反，React.js不了解Chart.js的处理内容，因此需要在每次DOM更新时手动销毁图表对象（如果不销毁，更新后仍会保留旧图表）。
...
# 部品がDOMに搭載された後に、グラフを書く。
componentDidMount: ->
@drawCharts()
# 部品が更新された後に、古いグラフを破壊し新しいグラフを書く。
componentWillUnmount: ->
@state.barChartInstance.destroy()
@state.pieChartInstance.destroy()
# DOM上のキャンバスを探し、そこにグラフを描画。
drawCharts: ->
# 棒グラフ
canvas = React.findDOMNode(@refs.bar) # refを手掛かりにキャンバスを探します。
ctx = canvas.getContext("2d") # 絵を書くための場所をゲットします。
# グラフ用データを渡し、グラフのオブジェクトを作ります。
# そのオブジェクトを後ほど破壊するためにポインターを保存しておきます。
@setState.barChartInstance = new Chart(ctx).Bar(@dataForBarChart())
# 円グラフ
canvas = React.findDOMNode(@refs.chart)
ctx = canvas.getContext("2d")
@setState.pieChartInstance = new Chart(ctx).Pie(@dataForPieChart())
# 棒グラフ用データ（これはドキュメンテーションから引用した例）
# ここで実際は@state.recordsのデータを加工してデータを準備します。
dataForBarChart: ->
labels: ["January", "February", "March", "April", "May", "June", "July"]
datasets: [
{
label: "My First dataset"
fillColor: "rgba(220,220,220,0.5)"
strokeColor: "rgba(220,220,220,0.8)"
highlightFill: "rgba(220,220,220,0.75)"
highlightStroke: "rgba(220,220,220,1)"
data: [65, 59, 80, 81, 56, 55, 40]
}
{
label: "My Second dataset"
fillColor: "rgba(151,187,205,0.5)"
strokeColor: "rgba(151,187,205,0.8)"
highlightFill: "rgba(151,187,205,0.75)"
highlightStroke: "rgba(151,187,205,1)"
data: [28, 48, 40, 19, 86, 27, 90]
}
]
# 円グラフ用データ（これはドキュメンテーションから引用した例）
# ここで実際は@state.recordsのデータを加工してデータを準備します。
dataForPieChart: ->
[
{
value: 300
color:"#F7464A"
highlight: "#FF5A5E"
label: "Red"
}
{
value: 50
color: "#46BFBD"
highlight: "#5AD3D1"
label: "Green"
}
{
value: 100
color: "#FDB45C"
highlight: "#FFC870"
label: "Yellow"
}
]
为了使结构更容易理解，在上述例子中我们用一个静态数据进行替换。
为了将组件的更新反映到图表中，需要动态地处理@state.records来生成图表数据。而且，不同类型的图表具有不同的数据结构。请详细参阅文档。
举个例子，我用这种方式创建了一个图表的数据。
dataForPieChart: ->
source = @volumeSortedBy("room")
ary = []
colors = ["#FE2E2E", "#FE9A2E", "#FE9A2E", "#9AFE2E", "#2EFE2E", "#2EFE9A",
"#2EFEF7", "#2E9AFE", "#2E2EFE", "#9A2EFE", "#FE2EF7", "#FE2E9A"]
@shuffleArray(colors)
for item, i in source
obj =
value: item.volume
color: colors[i]
highlight: colors[i]
label: item.room
ary.push(obj)
ary
dataForBarChart: ->
source = @volumeSortedBy("category")
labels = source.map (obj) -> obj.category
data = source.map (obj) -> obj.volume
datasets = [
{
fillColor: "rgba(151,187,205,0.5)"
strokeColor: "rgba(151,187,205,0.8)"
highlightFill: "rgba(151,187,205,0.75)"
highlightStroke: "rgba(151,187,205,1)"
data: data
}
]
{ labels: labels, datasets: datasets }
整体形象的一个例子
R = React.DOM
# Canvases for charts
PieChartCanvas = React.createClass
render: ->
R.canvas
style: { height: 200, width: 200 }
BarChartCanvas = React.createClass
render: ->
R.canvas
style: { height: 200, width: 400 }
@MovingRecordsApp = React.createClass
getInitialState: ->
records: @props.data
# Remember Chart.js instances so we can delete them later.
barChartInstance: null
pieChartInstance: null
getDefaultProps: ->
records: []
addRecord: (record) ->
records = React.addons.update(@state.records, { $unshift: [record] })
@setState records: records
deleteRecord: (record) ->
index = @state.records.indexOf record
records = React.addons.update(@state.records, { $splice: [[index, 1]] })
@replaceState records: records
updateRecord: (record, newRecord) ->
index = @state.records.indexOf record
records = React.addons.update(@state.records, { $splice: [[index, 1, newRecord]] })
@replaceState records: records
chartsPanel: ->
R.div
className: "panel panel-blue"
R.div
className: 'panel-heading'
R.div
className: "row"
R.div
className: "col-xs-3"
R.div
className: "fa fa-home fa-5x"
R.div
className: "col-xs-9 text-right"
R.div
className: 'huge'
"Total: #{@totalVolume()}"
R.div null,
"cubic feet"
R.div
className: 'panel-body'
R.div
className: 'row text-center'
R.div
className: 'col-sm-6'
React.createElement BarChartCanvas,
ref: "bar"
R.div
className: 'col-sm-6'
React.createElement PieChartCanvas,
ref: "chart"
totalVolume: ->
sum = 0
for obj in @state.records
sum += (obj.volume * obj.quantity)
sum
render: ->
R.div
className: "app_wrapper"
@chartsPanel()
R.hr null
R.h2 null, "Add a new item"
React.createElement NewMovingRecordForm,
handleNewRecord: @addRecord
roomSuggestions: @props.roomSuggestions
categorySuggestions: @props.categorySuggestions
R.hr null
React.createElement Records,
records: @state.records,
handleDeleteRecord: @deleteRecord,
handleUpdateRecord: @updateRecord
# 部品がDOMに搭載された後に、グラフを書く。
componentDidMount: ->
@drawCharts()
# 部品が更新された後に、古いグラフを破壊し新しいグラフを書く。
componentWillUnmount: ->
@state.barChartInstance.destroy()
@state.pieChartInstance.destroy()
# DOM上のキャンバスを探し、そこにグラフを描画。
drawCharts: ->
# 棒グラフ
canvas = React.findDOMNode(@refs.bar) # refを手掛かりにキャンバスを探します。
ctx = canvas.getContext("2d") # 絵を書くための場所をゲットします。
# グラフ用データを渡し、グラフのオブジェクトを作ります。
# そのオブジェクトを後ほど破壊するためにポインターを保存しておきます。
@setState.barChartInstance = new Chart(ctx).Bar(@dataForBarChart())
# 円グラフ
canvas = React.findDOMNode(@refs.chart)
ctx = canvas.getContext("2d")
@setState.pieChartInstance = new Chart(ctx).Pie(@dataForPieChart())
dataForPieChart: ->
[
{
value: 300
color:"#F7464A"
highlight: "#FF5A5E"
label: "Red"
}
{
value: 50
color: "#46BFBD"
highlight: "#5AD3D1"
label: "Green"
}
{
value: 100
color: "#FDB45C"
highlight: "#FFC870"
label: "Yellow"
}
]
dataForBarChart: ->
labels: ["January", "February", "March", "April", "May", "June", "July"]
datasets: [
{
label: "My First dataset"
fillColor: "rgba(220,220,220,0.5)"
strokeColor: "rgba(220,220,220,0.8)"
highlightFill: "rgba(220,220,220,0.75)"
highlightStroke: "rgba(220,220,220,1)"
data: [65, 59, 80, 81, 56, 55, 40]
}
{
label: "My Second dataset"
fillColor: "rgba(151,187,205,0.5)"
strokeColor: "rgba(151,187,205,0.8)"
highlightFill: "rgba(151,187,205,0.75)"
highlightStroke: "rgba(151,187,205,1)"
data: [28, 48, 40, 19, 86, 27, 90]
}
]
通过考虑在生活方式的哪个环节来重新绘制图表，我一开始遇到了困扰。我在使用console.log进行确认的同时尝试了各种模式。如果在更新图表后旧图表没有被清除，旧图表会重叠并渲染出来。经过一番摸索，我发现只需要在componentDidMount中设置图表，在componentWillUnmount中销毁图表就能成功解决这个问题。
我发现通过在React.js组件内部绘制Chart.js图表，可以立即将用户输入的结果内容反映在图表中。而且这个过程相对简单。目前，由于文件过于拥挤，我们计划将图表组件作为一个独立的部件进行重构。
根据在这里学到的结果，我们对图形组件进行了封装。
# Github
https://github.com/mnishiguchi/InteractiveChartComponent
# Github
请访问以下链接查看我的Github仓库，里面有我开发的交互式图表组件。
https://github.com/mnishiguchi/InteractiveChartComponent
#参考资料:
请提供以下内容的中文本地化释义，仅需一个选项：
-
- http://www.chartjs.org/docs/
- https://facebook.github.io/react/docs/component-specs.html
以上就是。
