Javascript 不确定如何在应用程序中重新渲染图表
在这里,这个应用程序呈现如下图表- 正如你所见,下面的应用程序中有两个侧栏。我需要在应用程序中再次呈现相同的图表。我的意思是,我需要两张已经渲染的图表。我认为呈现的图表是用下面的代码绘制的,但是当我尝试重复相同的代码时,它不会再次呈现相同的图表Javascript 不确定如何在应用程序中重新渲染图表,javascript,chart.js,Javascript,Chart.js,在这里,这个应用程序呈现如下图表- 正如你所见,下面的应用程序中有两个侧栏。我需要在应用程序中再次呈现相同的图表。我的意思是,我需要两张已经渲染的图表。我认为呈现的图表是用下面的代码绘制的,但是当我尝试重复相同的代码时,它不会再次呈现相同的图表 <div class="divBar"> <canvas id="bar"></canvas> </div> 如下所示,我甚至尝试将此处的画布id更改为其
<div class="divBar">
<canvas id="bar"></canvas>
</div>
如下所示,我甚至尝试将此处的画布id更改为其他id,但它仍然不会重新显示图表-
<div class="divBar">
<canvas id="bar-duplicate"></canvas>
</div>
下面是完整的应用程序代码-
我该如何重新播放另一张正在播放的同类图表?我需要在第二个侧边栏菜单旁边呈现第二个图表
import React, { Component } from "react";
import { useState, useEffect } from "react";
import { FaBeer } from 'react-icons/fa';
import { Link } from 'react-router-dom';
//import { AiOutlineClose } from 'react-icons/ai';
import "./styles.css";
import { Chart } from "chart.js";
import moment from "moment";
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import { ProSidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import 'react-pro-sidebar/dist/css/styles.css';
export default class App extends Component {
constructor(props) {
super(props);
this.levelsArr = [
"11/02/2011",
"12/02/2011",
"13/02/2011",
"14/02/2011",
"15/02/2011",
"16/02/2011",
"17/02/2011",
"18/02/2011"
];
this.chartData = {
dataSet1: Array.from(
{ length: 8 },
() => Math.floor(Math.random() * 590) + 10
),
dataSet2: Array.from(
{ length: 8 },
() => Math.floor(Math.random() * 590) + 10
)
};
this.state = {
months: [
{ month: "Jan", value: "0" },
{ month: "Feb", value: "1" },
{ month: "Mar", value: "2" },
{ month: "Apr", value: "3" },
{ month: "May", value: "4" },
{ month: "Jun", value: "5" },
{ month: "Jul", value: "6" },
{ month: "Aug", value: "7" }
],
dates: [
{ date: "11/02/2011", value: "0" },
{ date: "12/02/2011", value: "1" },
{ date: "13/02/2011", value: "2" },
{ date: "14/02/2011", value: "3" },
{ date: "15/02/2011", value: "4" },
{ date: "16/02/2011", value: "5" },
{ date: "17/02/2011", value: "6" },
{ date: "18/02/2011", value: "7" }
],
from: "0",
toMonth: "7",
fromDate: "0",
toDate: "7",
filterLimit: 100,
sidebarOpen: true,
sidebar: false
};
this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
this.sidebar = this.showSidebar.bind(this);
}
onSetSidebarOpen(open) {
this.setState({ sidebarOpen: open });
}
showSidebar(sidebar) {
this.setState({sidebar: !sidebar});
}
componentDidMount() {
this.barChart = new Chart("bar", {
type: "bar",
options: {
responsive: true,
title: {
display: true,
text: "Student Admission Data"
}
},
data: {
labels: ["11/02/2011", "12/02/2011", "13/02/2011", "14/02/2011", "15/02/2011", "16/02/2011", "17/02/2011", "18/02/2011"],
datasets: [
{
type: "bar",
label: "School 1",
data: this.chartData.dataSet1,
backgroundColor: "rgba(20,200,10,0.4)",
borderColor: "rgba(20,200,10,0.4)",
fill: false
},
{
type: "bar",
label: "School 2",
data: this.chartData.dataSet2,
backgroundColor: "rgba(100,189,200,0.4)",
borderColor: "rgba(100,189,200,0.4)",
fill: false
}
]
}
});
}
applyFilter() {
//console.log(this.chartData.dataSet1);
const value = this.state.filterLimit;
const lessThanOrGreaterThan = this.state.lessThanOrGreaterThan;
console.log(lessThanOrGreaterThan);
this.barChart.data.datasets[0].data = this.chartData.dataSet1;
this.barChart.data.datasets[1].data = this.chartData.dataSet2;
this.barChart.data.datasets.forEach((data, i) => {
if (lessThanOrGreaterThan === "greaterThan") {
this.barChart.data.datasets[i].data = data.data.map((v) => {
if (v >= value) return v;
else return 0;
});
// console.log(">>>>>>>>", this.barChart.data.datasets[i].data);
} else {
this.barChart.data.datasets[i].data = data.data.map((v) => {
if (v <= value) return v;
else return 0;
});
//console.log("?????????", this.barChart.data.datasets[i].data);
}
});
this.barChart.update();
}
applyDateFilter() {
this.barChart.data.labels = this.levelsArr.slice(
parseInt(this.state.from),
parseInt(this.state.toMonth) + 1
);
this.barChart.update();
}
applyDaysFilter() {
this.barChart.data.labels = this.levelsArr.slice(
parseInt(this.state.fromDate),
parseInt(this.state.toDate) + 1
);
this.barChart.update();
}
render() {
return (
<div class="chart-diplay">
<div>
<React.StrictMode>
<div className = 'container'>
<div class="divSideBar">
<ProSidebar>
<Menu iconShape="square">
<MenuItem>
<select
id="lessThanOrGreaterThan"
value={this.state.lessThanOrGreaterThan}
onChange={(e) =>
this.setState({ lessThanOrGreaterThan: e.currentTarget.value })
}
>
<option value="lessThan">Less Than</option>
<option value="greaterThan">Greater Than</option>
</select>
</MenuItem>
<MenuItem>
<input
id="filterLimit"
placeholder="Filter Limit"
value={this.state.filterLimit}
onChange={(e) => this.setState({ filterLimit: e.target.value })}
></input>
</MenuItem>
<MenuItem>
<button class="button" onClick={() => this.applyFilter()}>
Apply Filter
</button>
</MenuItem>
<MenuItem>
<div>
<select
id="from"
value={this.state.from}
onChange={(e) => this.setState({ from: e.target.value })}
>
{this.state.months.map((el) => (
<option value={el.value} key={el}>
{" "}
{el.month}{" "}
</option>
))}
</select>
<select
id="toMonth"
value={this.state.toMonth}
onChange={(e) => this.setState({ toMonth: e.target.value })}
>
{this.state.months.map((el) => (
<option value={el.value} key={el}>
{" "}
{el.month}{" "}
</option>
))}
</select>
</div>
</MenuItem>
<MenuItem>
<button class="button" onClick={() => this.applyDateFilter()}>
Apply Months Filter
</button>
</MenuItem>
</Menu>
</ProSidebar>
</div>
<div class="divBar">
<canvas id="bar"></canvas>
</div>
</div>
</React.StrictMode>
</div>
<div>
<React.StrictMode>
<div className = 'containerTwo'>
<div class="divSideBar">
<ProSidebar>
<Menu iconShape="square">
<MenuItem>
<select
id="lessThanOrGreaterThan"
value={this.state.lessThanOrGreaterThan}
onChange={(e) =>
this.setState({ lessThanOrGreaterThan: e.currentTarget.value })
}
>
<option value="lessThan">Less Than</option>
<option value="greaterThan">Greater Than</option>
</select>
</MenuItem>
<MenuItem>
<input
id="filterLimit"
placeholder="Filter Limit"
value={this.state.filterLimit}
onChange={(e) => this.setState({ filterLimit: e.target.value })}
></input>
</MenuItem>
<MenuItem>
<button class="button" onClick={() => this.applyFilter()}>
Apply Filter
</button>
</MenuItem>
<MenuItem>
<div>
<select
id="from"
value={this.state.fromDate}
onChange={(e) => this.setState({ fromDate: e.target.value })}
>
{this.state.dates.map((el) => (
<option value={el.value} key={el}>
{" "}
{el.date}{" "}
</option>
))}
</select>
<select
id="toMonth"
value={this.state.toDate}
onChange={(e) => this.setState({ toDate: e.target.value })}
>
{this.state.dates.map((el) => (
<option value={el.value} key={el}>
{" "}
{el.date}{" "}
</option>
))}
</select>
</div>
<MenuItem>
<button class="button" onClick={() => this.applyDaysFilter()}>
Apply Days Filter
</button>
</MenuItem>
</MenuItem>
</Menu>
</ProSidebar>
</div>
</div>
</React.StrictMode>
</div>
</div>
);
}
}
创建两个图表对象
将呈现两个画布元素
在过滤器更新时,您需要更新图表对象并调用更新函数
在componentDidMount中,您需要为此创建另一个图表引用。barChart=new Chartbar2,{…}检查此项