如何解决ChartJS - 滚动二十分钟视图
下面的代码,
有没有办法通过滚动的 20 分钟视图获得“实时”?似乎无法在启用此功能的选项中找到任何内容。
ChartJS 2.9.4 版
import 'chartjs-plugin-zoom';
import { Line } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';
export default () => {
const data = {
datasets: [
{
label: 'MWC',borderColor: 'rgb(255,99,132)',backgroundColor: 'rgba(255,132,0.5)',steppedLine: true,lineTension: 0,borderDash: [8,4],data: new Array(1000).fill(null).map((_,i) => {
return {
x: new Date(new Date().setTime(new Date().getTime() + (i + 1) * 1000)),y: random(500,1000),};
}),// REPLACE THIS WITH REALTIME Feed
},],};
const options = {
scales: {
xAxes: [
{
type: 'realtime',time: {
unit: 'minute',displayFormats: {
quarter: 'h:mm a',},realtime: {
onRefresh: function(chart: any) {
// eslint-disable-next-line functional/immutable-data
},delay: 2000,zoom: {
enabled: true,mode: 'x',rangeMin: {
x: null,threshold: 10,rangeMax: {
x: null,};
return (
<div>
<Line data={data} options={options} />
</div>
);
};
解决方法
duration
属性将帮助您将查看限制在特定时间限制内。它接受以毫秒为单位的时间,对于 20 分钟的视图,您可以像下面那样配置它。
欲了解更多详情,请查看插件Configuration
realtime: {
onRefresh: function(chart: any) {
// eslint-disable-next-line functional/immutable-data
},delay: 2000,duration: 1200000,},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。