React.js – 可重用Chart.js封装类

3 年 ago
清, 扬
2 minutes
Screenshot 2015-07-14 16.25.07.png

经过之前在“使用React.js + Chart.js绘制交互式图表”中不断尝试和改进，我现在编写了一个简单的包装类，使之成为React.js组件，用于使用Chart.js。我使用CoffeeScript编写，而不是使用JSX。由于成功实现了这个目标，我想向大家介绍一下。

我认为可以在一个允许用户添加和更新数据的应用程序中，利用多个简单的图表来创建交互式图表。

环境

    • react-js

 

    chart-js

#CustomChart方法
这个方法将图表处理封装起来。
只需传递Chart.js的图表类型名称作为参数，就可以创建指定类型的React.js组件。例如，可以使用”Bar”、”Pie”、”PolarArea”等。有关可用的图表类型，请参阅Chart.js文档。

@CustomChart = (chartType) ->

  React.createClass
    getInitialState: ->
      chartInstance: null

    # グラフを書くキャンバスを作る。
    render: ->
      React.DOM.canvas
        ref:   @props.name
        style: { height: @props.height, width: @props.width }

    # 部品がDOMに搭載されたら、グラフを初期化。
    componentDidMount: ->
      @initializeChart()

    # 部品がDOMから外されたら、古いグラフを破壊。
    componentWillUnmount: ->
      @state.chartInstance.destroy() if @state.chartInstance

    # 初期化の処理
    initializeChart: ->
      canvas = React.findDOMNode(@refs[@props.name])
      ctx    = canvas.getContext("2d")
      chart  = new Chart(ctx)[chartType](@props.data, @props.options || {})
      @setState.chartInstance = chart

优点

    • 簡単にChart.jsグラフをReact.jsの中で使用可能。

 

    • 親部品からCustomChartメソッドで作った部品に新しいデータが渡されると、そのデータに基づきグラフが自動的に更新されます。

CustomChartメソッドのみで、複数の異なるタイプのグラフ部品をドライに作ることが可能です。

## 使用示例
在父组件的render方法中使用React.createElement来实例化对象。需要将四个属性作为props传递。

name: 後にキャンバスを探す手掛かりとなるものなので、固有の名前をつける。

data: グラフ用のデータ。

height: キャンバスの高さ。

width: キャンバスの幅。

# "Bar"を引数とすると、Bar Chartを作ります。
React.createElement CustomChart("Bar"),
  name: "barChart"         # 固有の名前
  data: @dataForBarChart() # グラフタイプに対応したデータ構造であること
  height: 200
  width:  400

# "Pie"を引数とすると、Pie Chartを作ります。
React.createElement CustomChart("Pie"),
  name: "pieChart"
  data: @dataForPieChart()
  height: 200
  width:  200

数据传输到图表中的数据结构因图表类型而异。例如，对于”Bar”类型，数据结构如下所示。有关其他图表类型的数据结构，请参考Chart.js文档。

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

如果您想更详细地设置选项配置的话，可以按以下方式设置所需的项目。不同类型的图表有不同的配置项。有关选项设置的详细信息，请参考Chart.js文档。

React.createElement CustomChart("Bar"),
  name: "barChart"
  data: @dataForBarChart()
  height: 200
  width:  400
  options: {
    scaleBeginAtZero:         true
    scaleShowGridLines:       true
    scaleGridLineColor:       "rgba(0,0,0,.05)"
    scaleGridLineWidth:       1
    scaleShowHorizontalLines: true
    scaleShowVerticalLines:   true
    barShowStroke:            true
    barStrokeWidth:           2
    barValueSpacing:          5
    barDatasetSpacing:        1
  }

总结

我很高兴能够分享使用React.js中的CustomChart方法来轻松地创建动态的Chart.js图表。我认为这种方法还可以应用到其他方面。我打算根据这次的学习经验来创建各种组件。

Github是一个存储代码的在线平台，网址为https://github.com/mnishiguchi/InteractiveChartComponent。

这些就是以上的内容。

bannerAds