fix chart line color

This commit is contained in:
Фролов 2021-04-11 12:55:15 +05:00
parent ea426b16ef
commit 3b297136fb
2 changed files with 15 additions and 9 deletions

View File

@ -1,8 +1,9 @@
import { Chart, TimeScale, Legend, LineController, LineElement, PointElement } from 'chart.js'
import 'chartjs-adapter-date-fns';
import React, { useEffect, useRef} from 'react'; import React, { useEffect, useRef} from 'react';
Chart.register( TimeScale, LineController, LineElement, PointElement, Legend ); //import { Chart, TimeScale, Legend, LineController, LineElement, PointElement, LinearScale } from 'chart.js'
import Chart from 'chart.js/auto';
import 'chartjs-adapter-date-fns';
//Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
const options = { const options = {
//showLine :true, //showLine :true,
@ -27,6 +28,10 @@ const options = {
}, },
}, },
}, },
x:{
type:'linear'
}
}, },
} }
@ -37,8 +42,8 @@ const data= {
{x: 10, y: '2021-04-09T17:50:34.021679+05:00'}, {x: 10, y: '2021-04-09T17:50:34.021679+05:00'},
{x: 15, y: '2021-04-09T17:50:33.021679+05:00'}, {x: 15, y: '2021-04-09T17:50:33.021679+05:00'},
{x: 20, y: '2021-04-09T17:50:32.021679+05:00'}], {x: 20, y: '2021-04-09T17:50:32.021679+05:00'}],
boderColor: 'rgba(0, 99, 132, 1)', backgroundColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(0, 99, 132, 1)', borderColor: 'rgb(255, 99, 132)',
}, },
{ {
label: 'Pressure', label: 'Pressure',
@ -46,9 +51,9 @@ const data= {
{x: 11, y: '2021-04-09T17:50:34.021679+05:00'}, {x: 11, y: '2021-04-09T17:50:34.021679+05:00'},
{x: 14, y: '2021-04-09T17:50:33.021679+05:00'}, {x: 14, y: '2021-04-09T17:50:33.021679+05:00'},
{x: 21, y: '2021-04-09T17:50:32.021679+05:00'}], {x: 21, y: '2021-04-09T17:50:32.021679+05:00'}],
boderColor: 'rgba(255, 99, 132, 1)',
backgroundColor: 'rgba(255, 99, 132, 1)', borderColor: 'rgba(0, 99, 132, 0.5)',
borderDash: [5, 5],
} }
] ]
} }

View File

@ -10,7 +10,8 @@ export default function Well(props){
const [saubData, setSaubData] = useState([]) const [saubData, setSaubData] = useState([])
const handleReceiveDataSaub = (data)=>{ const handleReceiveDataSaub = (data)=>{
setSaubData(pre => [...pre, ...data].slice(-1024)) if(data)
setSaubData(pre => [...pre, ...data].slice(-1024))
} }
useEffect( ()=> { useEffect( ()=> {