Closed mantou132 closed 7 years ago
Set to 0 to not draw straightlines.
import React from 'react'; import {Line} from 'react-chartjs'; import styles from './statistics.scss'; export default class LineChart extends React.Component { constructor (props) { super(props); this.state = { show: false, width: 0, height: 0, data: { labels: props.labels || ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [ { label: props.label || 'My First dataset', fill: false, lineTension: 0, backgroundColor: 'rgba(75,192,192,0.4)', borderColor: 'rgba(75,192,192,1)', borderCapStyle: 'butt', borderDash: [], borderDashOffset: 0.0, borderJoinStyle: 'miter', pointBorderColor: 'rgba(75,192,192,1)', pointBackgroundColor: '#fff', pointBorderWidth: 1, pointHoverRadius: 5, pointHoverBackgroundColor: 'rgba(75,192,192,1)', pointHoverBorderColor: 'rgba(220,220,220,1)', pointHoverBorderWidth: 2, pointRadius: 1, pointHitRadius: 10, data: props.data || [65, 59, 80, 81, 56, 55, 40], spanGaps: false } ] } }; } componentDidMount () { const rect = this.refs.chart.getBoundingClientRect(); const width = rect.width; const height = rect.height; setTimeout(() => { this.setState({ ...this.state, show: true, width, height }); }, 100); } render () { const {width, height, data, show} = this.state; return ( <div ref="chart" className={styles.chartwrap}> <div className={styles.chartspace}/> {show && <Line className={styles.chart} data={data} width={width} height={height}/>} </div> ); } } LineChart.propTypes = { i18n: React.PropTypes.object, label: React.PropTypes.string, labels: React.PropTypes.array, data: React.PropTypes.array };
should look chart.js v1.1.1 documents
Set to 0 to not draw straightlines.