React 中的可视化数据答案

【问题标题】：Visualization data in ReactReact 中的可视化数据
【发布时间】：2021-06-07 16:43:23
【问题描述】：

我需要知道如何将前端的后端数据可视化为直方图或任何其他图表类型。我使用 ASP.net Core 作为后端，React 作为前端。

【问题讨论】：

那里有大量的反应图表库。请描述真正的问题
我需要做一个获取请求并将我的数据获取到一个我不知道库的直方图。你能解释一下库

标签： javascript reactjs asp.net-core

【解决方案1】：

有很多方法可以在图表中可视化原始数据。如果你想使用现成的库，可以查看chartjs.org

或者，根据您要创建的图表的复杂性以及是否需要拥有完整的图表库，您可以编写自己的代码来显示直方图。

这取决于你对集成/编写 javascript/React 代码的舒适程度:)

这里有一些值和对显示数据的简单 React 组件的调用：

const distribution = [0, 1, 26, 92, 67, 67, 50, 32, 15, 19, 7, 7, 15, 9, 32]
<Canvas distrib = {distribution} />

Canvas.js

import React, { useRef, useEffect } from 'react';

const Canvas = props => {
  
  const canvasRef              = useRef(null)
  const distribution           = props.distrib
  const distFromLeftEdge       = 5
  const widthOfColumn          = 5    // Width (pixels) of Histogram column
  const distanceBetweenColumns = 16   // Distance between Histogram columns
  const chartHeight            = 190  // canvasHeight - chartHeight = Height of chart above the base
  const canvasHeight           = 200  // Total height of canvas
  const canvasWidth            = 400  // Total width of canvas

  const draw = ctx => {
    ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height)
    ctx.fillStyle = '#999999'
    ctx.beginPath()
    distribution.forEach((el,index) => ctx.rect(distFromLeftEdge+distanceBetweenColumns*index, chartHeight, widthOfColumn, -1*distribution[index]))
    ctx.stroke()
    ctx.fillStyle = '#e6eef0'
    ctx.fill()
    ctx.height    = canvasHeight 
    ctx.width     = canvasWidth     
  }
  
  useEffect(() => {
    const canvas  = canvasRef.current
    const context = canvas.getContext('2d')
    draw(context)
  }, [draw])
  
  return (
  <>
    <canvas ref={canvasRef}  width={canvasWidth} height={canvasHeight} {...props}/>
  </>
  )
}

export default Canvas

【讨论】：