import React from 'react'; import { Bar } from 'react-chartjs-2'; import { HubConnectionBuilder } from '@microsoft/signalr'; import { DataLabels } from 'chartjs-plugin-datalabels'; import NoticeAlert from './NoticeAlert'; import { Image } from 'react-bootstrap'; import azureImage from './image/一站式防疫信息实时互动平台主KV.jpg'; const apiBaseUrl = process.env.REACT_APP_API_BASE_URL; class ChartPart extends React.Component { constructor(props) { super(props); this.state = {chartData: {}}; this.updateChart = this.updateChart.bind(this); } componentDidMount() { const connection = new HubConnectionBuilder() .withUrl(`${apiBaseUrl}/api`) .build(); connection.on('updateChart', this.updateChart); connection.start() .then(() => { console.log("connected"); fetch(`${apiBaseUrl}/api/chart`); }) .catch(error => { console.error(error.message) }); } updateChart(message) { this.setState({ chartData: { datasets: [{ label: '观众', data: [message.audienceCount], backgroundColor: "#2eb7e6" }, { label: '弹幕', data: [message.commentCount], backgroundColor: "#f08029" }, { label: '通知', data: [message.noticeCount], backgroundColor: "#68b141" }] } }); } render() { const options = { legend: { position: "bottom" }, scales: { yAxes: [{ ticks: { beginAtZero: true }}] }, plugins: { datalabels: { display: function(context) { return context }, font: { weight: 'bold' } } }, tooltips: { enabled: false } }; return ( <div> <Image src={azureImage} style={{width: "98%"}} /> <h3 className="text-left my-3">实时统计</h3> <Bar data={this.state.chartData} options={options} plugins={DataLabels}/> <NoticeAlert /> </div> ) } } export default ChartPart;