如何使用 React js 绘制简单的迷你图？
Posted
技术标签:
【中文标题】如何使用 React js 绘制简单的迷你图？【英文标题】：how to draw simple sparkline graph using react js? 【发布时间】：2016-06-30 13:13:31 【问题描述】：我正在实现 websocket 客户端-服务器应用程序，其中 websocket 服务器在节点 js 中实现，该节点运行良好，等待 1234 端口上的客户端连接。
在客户端，我必须在 react js 中实现它，因为服务器正在向连接的客户端发送消息，并且基于这些消息，我必须使用 react 迷你图来实现一个简单的图表。请指导我如何使用来自 websocket 的输入值来绘制图表？
index.html：
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<div id="content"></div>
<script type="text/javascript">
var content = document.getElementById('content');
var socket = new WebSocket('ws://localhost:1234','security');
socket.onopen = function ()
;
socket.onmessage = function (message)
content.innerHTML += message.data +'<br />';
;
socket.onerror = function (error)
console.log('WebSocket error: ' + error);
;
</script>
</head>
</html>
App.jsx：
import React from 'react';
class App extends React.Component
render()
return (
<div>
Hello world!!!
</div>
);
export default App;
main.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('content'))
现在只是显示目的，我在 onMessage() 方法中打印它。实际上我如何实现这个 websocket 逻辑以及如何绘制简单的图形？
【问题讨论】：
【参考方案1】：这里有一个很好的解释，让反应组件与 Websockets 一起工作。
https://blog.pusher.com/making-reactjs-realtime-with-websockets/
你基本上做的是在你的 react 组件的 componentDidMount 方法中绑定 socket.onmessage 函数。然后，每次有新消息到达时，您使用 setState 设置组件的新状态，这会重新渲染组件。
【讨论】：
是的......完成这些事情......有没有适合迷你图的例子，以便我可以更好地理解如何绘制图形？我关注了这个 [jsfiddle.net/69z2wepo/47364] 链接，但没有正确理解如何根据 x 轴和 y 轴内容绘制图形？ @kit 你有什么样的数据？迷你图通常没有轴。 我希望日期在 x 轴上，一些随机数（例如 420）在 y 轴上。但实际上我需要 react-d3 的 GroupBarChart 解决方案。【参考方案2】：让我们从一个演示开始：http://jsfiddle.net/69z2wepo/47364/
由于我找不到 React Sparkline 库，我可以链接到 jsfiddle，我创建了一个模拟 <Sparkline> 组件，它绘制了一个简单的图形。但是代码的逻辑很简单：
const Graph = React.createClass(
getInitialState()
return data : [0.25,1,0.5,0.75,0.25,1,0.25,0.5,0.75,1,0.25]
,
componentDidMount()
// this is an "echo" websocket service
this.connection = new WebSocket('wss://echo.websocket.org');
// listen to onmessage event
this.connection.onmessage = evt =>
// add the new data point to state
this.setState(
data : this.state.data.concat([ evt.data ])
)
;
// for testing purposes: sending to the echo service which will send it back back
setInterval( _ =>
this.connection.send( Math.random() )
, 1000 )
,
render: function()
// slice(-10) gives us the ten most recent data points
return <Sparkline data= this.state.data.slice(-10) />;
);
【讨论】：
这对我来说真的很需要，但是当我尝试这个面临 Bad JSFiddle configuration, please fork original React JSFiddle 错误时，这是因为我们在 html 文件中提供了 - ...我怎样才能避免这个错误让这个应用程序处于运行状态？以上是关于如何使用 React js 绘制简单的迷你图？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React.js Flux 架构和 McFly 中使用操作处理 API 调用？