- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在查看 c3.js 与 reactjs 的集成,以获取来自服务器端事件的实时数据。这是我到目前为止所拥有的:
https://jsfiddle.net/69z2wepo/15384/
C3js 具有流 API,可用于为新传入数据呈现部分图形 (http://c3js.org/samples/api_flow.html)。
不过,我相信使用该 API 实际上会直接操作 DOM,而不是使用 React 的虚拟 DOM 概念。任何可能的解决方法的想法/建议。
我查看了现有的 NPM 模块,但找不到可以支持该用例的模块。
实际上,我想将图形从一个图形转换为另一个图形(C3 API 对此提供了很好的支持)。 C3 js 基于 d3 js。我知道 d3 js 与 react 的绑定(bind)要好得多,但我需要的东西可以通过 C3 更好地获得。
同样在当前代码中,我正在使用 bindto: '#chart_1',
再次直接操作 DOM。我认为这不是呈现图形的最佳方式。对此的任何想法也表示赞赏。
代码:
var getDataFromStores = function() {
return [{
"proxy" : "10.0.1.15:1211",
"url" : "http://www.google.com/in/test",
"host" : "http://www.google.com/",
"time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
"useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
"responsetime" : 200,
"pageSize" : 332
},{
"proxy" : "10.0.1.15:1212",
"url" : "http://www.google.com/in/try",
"host" : "http://www.google.com/",
"time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
"useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
"responsetime" : 100,
"pageSize" : 200
},{
"proxy" : "10.0.1.15:1213",
"url" : "http://www.google.com/in/demo",
"host" : "http://www.google.com/",
"time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
"useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
"responsetime" : 333,
"pageSize" : 500
}];
};
var Chart = React.createClass({
getInitialState: function(){
var state = {
data : {
json : getDataFromStores(),
type : 'line',
keys : {
x: 'url',
value: ['proxy', 'url','host','time','responsetime',"pageSize","useragent"]
}
},
axis : {
x: {
type: 'category'
}
}
};
return state;
},
componentDidMount: function(){
this._renderChart(this.state);
},
_renderChart: function(state){
var lineChart = c3.generate({
bindto: '#chart_1',
data: state.data,
axis: state.axis
})
},
render: function() {
this._renderChart(this.state);
return (
<div id="container">
<div id="chart_1"></div>
</div>
);
}
});
React.render(<Chart />, document.body);
最佳答案
我在 Reactjs 中使用 c3 的方法是将数据作为属性传递,并使用 componentDidUpdate 更新图表。这是一个例子。 id 的东西是一个 hack,可以用 this.getDOMNode() 重构
var GaugeChart = React.createClass({
propTypes: {
limit: React.PropTypes.number,
balance: React.PropTypes.number
},
getInitialState: function() {
return({ id: "" });
},
getUUID: function() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
},
renderChart: function() {
var id = this.state.id;
var width = 40;
var self = this;
(function() {
self.chart = c3.generate({
bindto: "#"+self.state.id,
data: {
columns: [
['Balance', parseFloat(self.props.balance)]
],
type: 'gauge',
},
color: {
pattern: ['#1ca2b8', '#1ca2b8', '#1ca2b8', '#1ca2b8'],
threshold: {
values: [30, 60, 90, 100]
}
},
gauge: {
max: this.props.limit,
label: {
format: function (value, ratio) {
return "$" + value;
}
},
width: width
},
tooltip: {
show: false
},
padding: {
bottom: 20
}
});
})();
this.update();
},
update: function() {
if (this.chart) {
this.chart.internal.config.gauge_max = this.props.limit;
this.chart.load({
columns: [['Balance', this.props.balance]]
});
}
},
componentDidMount: function() {
// hacky way (?) to ensure this always gets it's own id that lasts through the component
this.setState({id: "gauge-chart-"+this.getUUID()}, this.renderChart);
$(this.getDOMNode()).on( "resize", this.update );
},
componentDidUpdate: function(prevProps, prevState) {
this.update();
},
componentDidDismount: function() {
$(this.getDOMNode()).off( "resize", this.update );
},
render: function() {
var container = <div id={this.state.id} ></div>
return container;
}
});
module.exports = GaugeChart;
希望这对您有所帮助,这种方法也可用于在容器大小发生变化时调整图表大小。
要连接到实时数据源,您可能必须使用 websockets,我推荐 Socket.io。
关于javascript - C3.js 与 React.js 集成以获得实时数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32432206/
#include using namespace std; class C{ private: int value; public: C(){ value = 0;
这个问题已经有答案了: What is the difference between char a[] = ?string?; and char *p = ?string?;? (8 个回答) 已关闭
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 7 年前。 此帖子已于 8 个月
除了调试之外,是否有任何针对 c、c++ 或 c# 的测试工具,其工作原理类似于将独立函数复制粘贴到某个文本框,然后在其他文本框中输入参数? 最佳答案 也许您会考虑单元测试。我推荐你谷歌测试和谷歌模拟
我想在第二台显示器中移动一个窗口 (HWND)。问题是我尝试了很多方法,例如将分辨率加倍或输入负值,但它永远无法将窗口放在我的第二台显示器上。 关于如何在 C/C++/c# 中执行此操作的任何线索 最
我正在寻找 C/C++/C## 中不同类型 DES 的现有实现。我的运行平台是Windows XP/Vista/7。 我正在尝试编写一个 C# 程序,它将使用 DES 算法进行加密和解密。我需要一些实
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
有没有办法强制将另一个 窗口置于顶部? 不是应用程序的窗口,而是另一个已经在系统上运行的窗口。 (Windows, C/C++/C#) 最佳答案 SetWindowPos(that_window_ha
假设您可以在 C/C++ 或 Csharp 之间做出选择,并且您打算在 Windows 和 Linux 服务器上运行同一服务器的多个实例,那么构建套接字服务器应用程序的最明智选择是什么? 最佳答案 如
你们能告诉我它们之间的区别吗? 顺便问一下,有什么叫C++库或C库的吗? 最佳答案 C++ 标准库 和 C 标准库 是 C++ 和 C 标准定义的库,提供给 C++ 和 C 程序使用。那是那些词的共同
下面的测试代码,我将输出信息放在注释中。我使用的是 gcc 4.8.5 和 Centos 7.2。 #include #include class C { public:
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它,visit the help center 。 已关
我的客户将使用名为 annoucement 的结构/类与客户通信。我想我会用 C++ 编写服务器。会有很多不同的类继承annoucement。我的问题是通过网络将这些类发送给客户端 我想也许我应该使用
我在 C# 中有以下函数: public Matrix ConcatDescriptors(IList> descriptors) { int cols = descriptors[0].Co
我有一个项目要编写一个函数来对某些数据执行某些操作。我可以用 C/C++ 编写代码,但我不想与雇主共享该函数的代码。相反,我只想让他有权在他自己的代码中调用该函数。是否可以?我想到了这两种方法 - 在
我使用的是编写糟糕的第 3 方 (C/C++) Api。我从托管代码(C++/CLI)中使用它。有时会出现“访问冲突错误”。这使整个应用程序崩溃。我知道我无法处理这些错误[如果指针访问非法内存位置等,
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 7 年前。
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
我有一些 C 代码,将使用 P/Invoke 从 C# 调用。我正在尝试为这个 C 函数定义一个 C# 等效项。 SomeData* DoSomething(); struct SomeData {
这个问题已经有答案了: Why are these constructs using pre and post-increment undefined behavior? (14 个回答) 已关闭 6
我是一名优秀的程序员,十分优秀!