[Open source] Tencent Omi-Chart was officially released

Supported charts

• <chart-bar />A histogram
• <chart-line />diagram
• <chart-scatter />A scatter diagram
• <chart-pie />The pie chart
• <chart-doughnut />Annular figure
• <chart-radar />Radar map
• <chart-polar-area />Polar diagram
• <chart-bubble />Bubble chart

Examples of online interaction

• Bar charts
  • Simple
  • Vertical
  • Horizontal
  • Multi Axis
  • Stacked Group
• Line charts
  • Base
  • Multi Axis
  • Stepped
  • Fill
  • Interpolation Modes
  • Point Sizes
  • Styles
  • Point Styles
• Scatter charts
  • Base
  • Multi Axis
• Other charts
  • Pie
  • Doughnut
  • Radar
  • PolarArea
  • Bubble
  • Bar Line

The installation

npm i omi-chart
Copy the code

Quick learning

import 'omi-chart'

define('my-app'.class extends WeElement {
  install(){
    this.chartData = {
      labels: ["Red"."Blue"."Yellow"."Green"."Purple"."Orange"].datasets: [{
        label: '# of Votes'.data: [12.19.3.5.2.3].backgroundColor: '#f391a9'.borderColor: '#ef5b9c'.borderWidth: 1}}]this.chartOptions = {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  }

  render(props, data) {
    return (
      <div>
        <chart-bar width={600} data={this.chartData} options={this.chartOptions} />
      </div>
    )
  }
})

render(<my-app />, 'body')
Copy the code

The specific options and data formats passed in can be seen in the chart.js documentation.

The principle of

Code is not much, directly look at the source code:

import { WeElement, define } from 'omi'
import Chart from 'chart.js'

class ChartBase extends WeElement {
  receiveProps(props) {
    this.chart.data = props.data
    this.chart.options = props.options
    this.chart.update()
  }

  render(props) {
    return (
      <div style={{ width: props.width + 'px', height: props.height + 'px' }}>
        <canvas ref={(e)= > { this.canvas = e }}>
        </canvas>
      </div>
    )
  }
}

define('chart-bar'.class extends ChartBase {
  installed() {
    this.chart = new Chart(this.canvas.getContext('2d'), {
      type: this.props.horizontal ? 'horizontalBar' : 'bar'.data: this.props.data,
      options: this.props.options
    })
  }
})

define('chart-line'.class extends ChartBase {
  installed() {
    this.chart = new Chart(this.canvas.getContext('2d'), {
      type: 'line'.data: this.props.data,
      options: this.props.options
    })
  }
})

define('chart-scatter'.class extends ChartBase {
  installed() {
    this.chart = new Chart.Scatter(this.canvas.getContext('2d'), {
      data: this.props.data,
      options: this.props.options
    })
  }
})
Copy the code

All charts inherit from ChartBase, and ChartBase inherit from WeElement. Omi-chart creates different types of chart based on the props passed in.

It utilizes the tick function receiveProps.

ReceiveProps – Trigger the tick function when the parent component is refreshed.

Preview: Omi will soon support IE9 and all mobile browsers, so stay tuned.

Star & Fork

– > Omi Chart please