dojo charting on nodejs

5759 ワード

nodejs dojo

nodejsでdojoを実行する文章が多いですが、dojox.chatingを具体的に使う資料が見つけられません.
node-canvasのようなオープンソースのプロジェクトは、理論的にはdojoが生成した図をファイルとして保存することができます.jsグラフライブラリの多くは座標軸の目盛文字をhtmlで表示しています.このようにホームページ上で写真に保存できません.ライブラリのテキストは完全にcanvasに生成され、dojoグラフは軸文字を設定してhtmlまたはcanvasに生成することができます.以下は具体的なプロセスとコードです.
環境:
1.node-canvas windowsインストール参照
文書、簡単に言えば、
Python 2.7.3をインストールし、環境変数を設定します.
Microsoft Visual C++2010 Expressをインストールします.
ダウンロード
cairo libraryは、C:\GTKに伸張し、環境変数を設定する.
npm udate-g npm
npm install-g node-gyp
npm install canvas
2.dojox.chatingで使うdomに関するものなので、jsdomをインストールしてコードを調整してください.
npm install jsdom
原則として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[i].createPNGStream){
				console.log("========"+div.children[i]);
				var canvas = div.children[i];
				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/_ベースの中:

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を使っています.

linuxではバイナリでnodejsをインストールします.