设为首页 收藏本站
云服务器等爆品抢先购,低至4.2元/月
查看: 654|回复: 0

[经验分享] dojo charting on nodejs

[复制链接]

尚未签到

发表于 2017-2-21 11:33:29 | 显示全部楼层 |阅读模式
在nodejs上运行dojo的文章很多,却找不到具体使用dojox.charting的资料,因为有node-canvas这样的开源项目,理论上可以把dojo生成的图保存为文件,实践中碰到一些问题并都解决了。js图表库很多都把坐标轴上的刻度文字用html来显示,这样在网页上都不能保存到图片里,更别说在后台了。库rgraph文字是完全生成在canvas上的,dojo图表是可设置轴文字生成到html或canvas的。下面是具体过程和代码:
环境:
1.node-canvas windows安装参照文档,简单说就是:
安装Python 2.7.3并设置环境变量
安装Microsoft Visual C++ 2010 Express
下载cairo library解压到C:\GTK并设置环境变量
npm update -g npm
npm install -g node-gyp
npm install canvas
2.因为dojox.charting用到的dom相关,所以还要安装jsdom,并在代码上调整一下
npm install jsdom
原则上不改dojo代码,不改下载的库,只有一个文件实在是没办法
dojo/_base/window.js里边有一句
doc: this["document"] || null, 改成
doc: this["document"] || window.document || null,
其它库不用改,在自己的代码中设置就行了。
代码:
1.启动代码:boot.js

var jsdom = require("jsdom").jsdom;
var document = jsdom("<html><head></head><body style='display:block;'><div id='StackedColumns_numbers' width='400' height='300'  style=''></div></body></html>", require("jsdom").level(2, "core"));
window = document.createWindow();
navigator = window.navigator;
global.dojoConfig = {
async: true,
forceGfxRenderer: 'canvas',
gfxRenderer: 'canvas',
basePath: ".",
packages: [{
name: "dojo",
location: "lib/dojo"
},{
name: "dojox",
location: "lib/dojox"
},{
name: "mynode",
location: "mynode"
}],
deps: ["mynode/main"]
};
require("./lib/dojo/dojo.js");

2.主程序:mynode/main.js

define(["dojo/_base/declare", "dojo/_base/lang", "dojo/dom", "dojo/node!fs",
"dojo/ready","dojox/charting/Chart", "dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns"],
function(declare, lang, dom, fs, ready, Chart, Default, StackedColumns){

ready(function(){
// StackedColumns, array of numbers
var chart6 = new Chart("StackedColumns_numbers",{title: ""});
chart6.addAxis("x", {fixLower: "major",htmlLabels: false, fixUpper: "major"});
chart6.addAxis("y", {vertical: true, htmlLabels: false,fixLower: "minor", fixUpper: "minor", natural: true, includeZero: true});
chart6.addPlot("default", {type: StackedColumns, gap: 5});
chart6.addSeries("Series A", [1, 2, 3, 4, 5], {fill: "red"});
chart6.addSeries("Series B", [5, 4, 3, 2, 1], {fill: "blue"});
chart6.render();
setTimeout(function(){
var div = dom.byId("StackedColumns_numbers");
console.log("========"+div.children);
for (var i=0;i<div.children.length;i++) {
if(div.children.createPNGStream){
console.log("========"+div.children);
var canvas = div.children;
var out = fs.createWriteStream('charting.png')
, stream = canvas.createPNGStream();
stream.on('data', function(chunk){
out.write(chunk);
});
}
}
}, 0);
});
});

使用setTimeout是因为dojox/gfx/canvas.js里面使用了setTimeout:makeDirty: function(){
// summary:
//internal method, which is called when we may need to redraw
if(!this.pendingImagesCount && !("pendingRender" in this)){
this.pendingRender = setTimeout(lang.hitch(this, this._render), 0);
}
},
3运行node boot.js生成图片文件,以下是解决轴上的文字和标题问题。
不能显示字是因为dojox/gfx/_base里边:px_in_pt: function(){
// summary:
//returns the current number of pixels per point.
return g._base._getCachedFontMeasurements()["12pt"] / 12 || 1;// Number
}, "|| 1"是后加的,通过创建dom的方式来计算在nodejs里行不通过,所以直接返回1。
如果要显示title,需要设置字体;因为title默认是用html来显示,所以要修改dojox/charting/Chart里var forceHtmlLabels = (g.renderer == "canvas"),
labelType = 'gfx';//forceHtmlLabels || !has("ie")  && !has("opera") ? "html" : "gfx",
tsize = g.normalizedLength(g.splitFontString(this.titleFont).size);这里直接用'gfx'。设置title的代码var chart6 = new Chart("StackedColumns_numbers",{title: "aaa",titleFont: "normal normal normal 8pt 黑体, Arial, sans-serif",});
chart6.addAxis("x", {fixLower: "major",htmlLabels: false, fixUpper: "major", natural: true});还有个中文问题解决起来较麻烦,编译时要让node-canvas支持国际化。
还有另一种思路svg png,它使用的是highchart.

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-345219-1-1.html 上篇帖子: nodejs使用nodejs创建简单的静态文件服务器 下篇帖子: 学会提问---nodejs初体验
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表