xxxxxxxxxx
/* App.js */
import React, { Component } from 'react';
import CanvasJSReact from '@canvasjs/react-charts';
//var CanvasJSReact = require('@canvasjs/react-charts');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
class App extends Component {
render() {
const options = {
animationEnabled: false,
title:{
text: "Monthly Sales - 2017"
},
axisX: {
valueFormatString: "MMM"
},
axisY: {
title: "Sales (in USD)",
prefix: "$"
},
data: [{
yValueFormatString: "$#,###",
xValueFormatString: "MMMM",
type: "spline",
dataPoints: [
{ x: new Date(2017, 0), y: 25060 },
{ x: new Date(2017, 1), y: 27980 },
{ x: new Date(2017, 2), y: 42800 },
{ x: new Date(2017, 3), y: 32400 },
{ x: new Date(2017, 4), y: 35260 },
{ x: new Date(2017, 5), y: 33900 },
{ x: new Date(2017, 6), y: 40000 },
{ x: new Date(2017, 7), y: 52500 },
{ x: new Date(2017, 8), y: 32300 },
{ x: new Date(2017, 9), y: 42000 },
{ x: new Date(2017, 10), y: 37160 },
{ x: new Date(2017, 11), y: 38400 }
]
}]
}
return (
<div>
<CanvasJSChart options = {options}
/* onRef={ref => this.chart = ref} */
/>
{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
</div>
);
}
}
module.exports = App;
xxxxxxxxxx
React is a free and open-source front-end
JavaScript library for building user
interfaces based on UI components. It is
maintained by Meta and a community of individual
developers and companies
xxxxxxxxxx
Declarative
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Declarative views make your code more predictable and easier to debug.
Component-Based
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
React can also render on the server using Node and power mobile apps using React Native.