Articles of 图表

build立dynamic图表仪表板

我有一个从女巫的REST api后端我想build立一个不同的filter等仪表板我检查chart.js d3.js …我的JSON有这样的结构: [{ id: 33, location: 'Madrid', value: 2.34, country: 'Spain', createdAt: '01/01/2017 11:44' }, { id: 34, location: 'Biarritz', value: 3.45, country: 'France', createdAt: '01/02/2017 11:44' }] 我需要的是呈现一些图表(chart.js很容易),但有什么filter(现场)开箱? 我的意思是,使图表dinamically刷新select一个范围的date,例如,或select一个国家等…其他方式…我必须select: 写一切在JS和刷新我的字符 写一个新的API来过滤我的数据 任何帮助?

如何更新Angular 2和Node JS中的ng2-chartjs2图表中的数据

我正在使用NodeJS,Angular2和ng2-chartjs2。 下面我列出了我的代码渲染图表的相关部分。 数据从使用固定date范围的API加载到this.data中。 我想让用户select一个date范围,然后更新图表。 从这里我知道你可以调用图表对象的update()来更新数据,但是我不知道如何获取图表对象,因为组件代码实际上并没有引用它 -当模板被渲染时,它是自动完成的。 查看源代码 (第13行),我看到作者打算让对象可用。 我联系了作者,但还没有收到答复,需要搬家。 我已经学到了很多关于Angular2的知识,但是我还没有专家,所以对Angular2的更深入的理解使得这一点变得很明显。 我怎样才能访问对象来调用它的update(),或者做一些其他干净的方式? 该模板包含 <chart [options]="simple.options"></chart> 和组件打印脚本代码包含 import { ChartComponent } from 'ng2-chartjs2'; … @Component({ selector: 'home', templateUrl: 'client/components/home/home.component.html', styleUrls: ['client/components/home/home.component.css'], directives: [DashboardLayoutComponent, CORE_DIRECTIVES, ChartComponent], pipes: [AddCommasPipe], }) … setCurrentSimpleChart = (simpleType: number): void => { this.simple.options = { type: 'line', options: this.globalOptions, data: { labels: this.data[simpleType].labels, […]

在Node-red仪表板(在模板上)显示正常图表或D3Js

有人已经实现了显示一个图表,而不是基于时间序列(如仪表板图表),但传递给它的数据? 我想知道是否可以使用模板来做到这一点? 但我不知道如何去做。 如果有人有一个小例子,那就太好了。

D3在一页上的每个图表的鼠标hover效果

我在一个页面上有多个d3图表,并希望为每个图表添加一个鼠标hover效果。 此刻只有一个图表受到影响,并具有鼠标hover效果。 我用多个图表创build了一个例子。 这是小提琴: http : //jsfiddle.net/zumdpjzx/ for( var i= 1; i < 3; i++){ console.log(i); var arrData = [ ["2014-08-20", 100, 100], ["2014-08-21", 95, 85], ["2014-08-22", 93, 71], ["2014-08-23", 88, 57], ["2014-08-24", 86, 42], ["2014-08-25", 98, 28], ["2014-08-26", 117, 14], ["2014-08-27", 123, 0] ]; arrData = arrData.sort((function(index){ return function(a, b){ return (a[index] === b[index] […]

$(…).getContext(“2d”)在使用chart.js时不是函数

我正在使用nodejs和玉视图引擎。 我想在我的页面中使用chart.js加载图表,我添加了jquery和chart.js库,但它仍然给我错误的标题$(…)。getContext(“2d”)不是一个函数。 请帮助我这个问题,谢谢。 $(document).ready(function(){ var ctx = $("#myChart").getContext("2d"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, […]

纯粹的Nodejs服务器图表库

使用Node.js在服务器上创build图表的最常见解决scheme是模拟DOM并使用js客户端图表库。 例如: http : //blog.stevenedouard.com/how-to-render-chart-js-charts-serverside/或产生一些进程。 这些解决scheme主要使用JSDOM和节点canvas,依赖(如开罗)并不总是很容易复制在不同的系统/操作系统(是的,在这方面的Docker帮助)。 是否有任何“纯粹的”Nodejs解决scheme/包dinamically生成图表,将它们保存到一个不需要本地依赖的stream?

图表js:隐藏图例中的一些标签

chart js的图例隐藏了一些标签吗? 我知道,我可以使用这个选项来隐藏所有的图例: legend: { display: false }但是我只需要隐藏图例中的一部分标签。

有没有人成功呈现jqPlot图表作为图像服务器端(例如与node.js)?

不幸的是我的组织仍然坚持使用IE6,但是(是的,我知道…)。 我喜欢jqPlot,但发现IE6感觉不一样。 所以,我试图解决IE6的许多漏洞和内存泄露,我想我会通过在服务器上生成图表的图像(也许是PNG)来绕过这个问题。 就我个人而言,客户端图表的交互性不如在服务器上产生图表图像caching的能力,并且在IE6上施加的压力小。它也将整齐地解决jqPlot输出不能正确打印的问题从IE6(我猜这可能是一个excanvas问题)。 但麻烦的是,我发现的服务器端解决scheme都不符合jqPlot的视觉/美学吸引力。 服务器端,我最熟悉的Perl和CPAN上可用的东西范围从function,但fugly(如Chart :: Gnuplot)美丽但无法获得(例如Chart :: Clicker,有几十个先决条件,并没有'即使经过一周的尝试,我也不想在Windows / ActiveState Perl上安装)。 谷歌告诉我,有些人可能试图使用node.js从服务器上的jqPlot生成PNG,但是我找不到任何证据certificate任何人都成功了。 我之前没有使用过node.js,所以想再次尝试一下node.js / jsdom的学习曲线,我并没有试图做一些不可能的事情。 任何build议,你可以给予赞赏(除“升级浏览器” – 这将最终发生,但不是可预见的)。

如何在服务器端使用d3库(如c3.js)在nodejs中生成图表?

我正在尝试使用c3js生成图表,这是一个d3库,以便于制图。 我发现你可以使用普通的d3在服务器端使用jsdom生成图表,因为d3有一个npm模块。 这是我遵循这个过程的指南: http : //www.gregjopa.com/2013/11/render-svg-charts-server-side-with-d3-js/ 但是,nvd3或c3js没有npm模块。 如何在服务器端使用这些库来生成在客户端使用的图表?

重复计数ORM中的多个计数查询

我想创build查询,它可以在sequelize.js一次在一个月的每一天的logging数不是像: Record.count({ where: { createdAt: { $like: '2015-04-14%' } } }).then(function(c) { console.log("2015-04-14 have been created" + c + "records"); }); Record.count({ where: { createdAt: { $like: '2015-04-15%' } } }).then(function(c) { console.log("2015-04-15 have been created" + c + "records"); }); Record.count({ where: { createdAt: { $like: '2015-04-16%' } } }).then(function(c) { console.log("2015-04-16 have been […]