react canvasjs -chart

BackEnd_Ash.log·2020년 6월 25일
0

react

목록 보기
13/41

메모 겸 영어공부겸

https://canvasjs.com/react-charts/column-chart/

canvas start

  • first create a react app
npx create-react-app react-columns-chart

canvas js file

you need cavans.react.js and canvas.min.js

https://canvasjs.com/react-charts/column-chart/

  • You should click on that url
  • should download

import CanvasJs React Component

import React, { Component } from "react";
import CanvasJSReact from "./canvasjs.react.js";
//var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

what you want class or function?

if you want write class code

class App extends Component {
  render() {
    const options = {
      title: {
        text: "Basic Column Chart in React",
      },
      data: [
        {
          type: "column",
          dataPoints: [
            { label: "Apple", y: 10 },
            { label: "Orange", y: 15 },
            { label: "Banana", y: 25 },
            { label: "Mango", y: 30 },
            { label: "Grape", y: 28 },
          ],
        },
      ],
    };

    return (
      <div>
        <CanvasJSChart
          options={options}
          /* onRef = {ref => this.chart = ref} */
        />
      </div>
    );
  }
}

export default App;
profile
꾸준함이란 ... ?

0개의 댓글