如何使用react js绘制简单的sparkline图形？

我正在实施websocket客户端服务器应用程序，其中websocket服务器在节点js中实现，该节点js正在为其1234端口上的客户端连接工作正常工作。如何使用react js绘制简单的sparkline图形？

在客户端我必须在响应js中实现这一点，因为服务器正在向连接的客户端发送消息，并基于这些消息我必须使用反应迷你图实现一个简单的图。请指导我如何使用来自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'))

现在只显示终端aying的目的我打印这onMessage（）方法。其实我怎么能实现这个websocket逻辑和如何绘制简单的图形？

来源

2016-06-30 kit

下面是关于使用Websockets处理反应组件的一个很好的解释。

https://blog.pusher.com/making-reactjs-realtime-with-websockets/

你基本上做的是你的反应成分componentDidMount方法里面绑定socket.onmessage功能。然后，每次新消息到达时，都会使用setState设置组件的新状态，setState会重新呈现组件。

来源

2016-06-30 13:42:48

是......完成这些事情......是否有火花任何合适的例子，这样我可以更好地了解如何绘制图表？我遵循这个[http://jsfiddle.net/69z2wepo/47364/]的链接，但没有正确理解如何绘制基于x轴和y轴内容的图形？ – kit

@kit你有什么样的数据？迷你图通常没有轴。 –

我希望在x轴上有日期，并且一些随机数（例如420）在y轴上。但实际上我得到了解决方案，我需要react-d3的GroupBarChart。 – kit

让我们先从一个演示：http://jsfiddle.net/69z2wepo/47364/

因为我找不到阵营迷你图的lib我可以链接到的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) } />; 
    } 
});

来源

2016-06-30 13:43:21 pawel

它真的需要我，但是当我试图面对**错误的JSFiddle配置，请分叉原始的React JSFiddle **错误，这是因为我们提供的HTML文件 - _ _ ...如何避免这个错误ñ使这个应用程序在运行状态？ – kit

如何使用react js绘制简单的sparkline图形？

回答

相关问题