mirror of https://github.com/masayuki0812/c3.git
Masayuki Tanaka
10 years ago
3 changed files with 151 additions and 0 deletions
@ -0,0 +1,11 @@
|
||||
{ |
||||
"js": [ |
||||
"../../bower_components/d3/d3.min.js", |
||||
"../../c3.min.js" |
||||
], |
||||
"css": [ |
||||
"../../c3.css" |
||||
], |
||||
|
||||
"template": "<html><head><meta charset=\"utf-8\"><style>{0}</style></head><body><div id=\"chart\"></div></body></html>" |
||||
} |
@ -0,0 +1,140 @@
|
||||
/** |
||||
* PNG\JPEG exporter for C3.js, version 0.2 |
||||
* (c) 2014 Yuval Bar-On |
||||
* |
||||
* usage: path/to/phantomjs output options [WxH] |
||||
* |
||||
*/ |
||||
|
||||
// useful python-styled string formatting, "hello {0}! Javascript is {1}".format("world", "awesome");
|
||||
if (!String.prototype.format) { |
||||
String.prototype.format = function() { |
||||
var args = arguments; |
||||
return this.replace(/{(\d+)}/g, function(match, number) {
|
||||
return typeof args[number] != 'undefined' |
||||
? args[number] |
||||
: match |
||||
; |
||||
}); |
||||
}; |
||||
} |
||||
|
||||
// defaults
|
||||
var page = require('webpage').create(), |
||||
fs = require('fs'), |
||||
system = require('system'), |
||||
config = JSON.parse( fs.read('config.json') ), |
||||
output, size; |
||||
|
||||
if (system.args.length < 3 ) { |
||||
console.log('Usage: phantasm.js filename html [WxH]'); |
||||
phantom.exit(1); |
||||
} else { |
||||
out = system.args[1]; |
||||
opts = JSON.parse( system.args[2] ); |
||||
|
||||
if (system.args[3]) { |
||||
var dimensions = system.args[3].split('x'), |
||||
width = dimensions[0], |
||||
height = dimensions[1]; |
||||
|
||||
function checkNum(check) { |
||||
check = parseInt(check); |
||||
if (!isNaN(check)) |
||||
return check; |
||||
return false; |
||||
} |
||||
|
||||
width = checkNum(width); |
||||
height = checkNum(height); |
||||
|
||||
if (width && height) { |
||||
page.viewportSize = { |
||||
height: height, |
||||
width: width |
||||
} |
||||
} |
||||
|
||||
// fit chart size to img size, if undefined
|
||||
if (!opts.size) { |
||||
opts.size = { |
||||
"height": height, |
||||
"width": width |
||||
}; |
||||
} |
||||
} else { |
||||
// check if size is defined in chart,
|
||||
// else apply defaults
|
||||
page.viewportSize = { |
||||
height: (opts.size && opts.size.height) ? opts.size.height : 320, |
||||
width: (opts.size && opts.size.width ) ? opts.size.width : 710, |
||||
} |
||||
} |
||||
} |
||||
|
||||
page.onResourceRequested = function(requestData, request) { |
||||
console.log('::loading resource ', requestData['url']); |
||||
};
|
||||
|
||||
// helpful debug functions
|
||||
page.onConsoleMessage = function(msg){ |
||||
console.log(msg); |
||||
}; |
||||
|
||||
page.onError = function(msg, trace) { |
||||
var msgStack = ['ERROR: ' + msg]; |
||||
|
||||
if (trace && trace.length) { |
||||
msgStack.push('TRACE:'); |
||||
trace.forEach(function(t) { |
||||
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : '')); |
||||
}); |
||||
} |
||||
|
||||
console.error(msgStack.join('\n')); |
||||
}; |
||||
|
||||
// render page
|
||||
function injectVerify(script) { |
||||
var req = page.injectJs(script); |
||||
if (!req) {
|
||||
console.log( '\nError!\n' + script + ' not found!\n' ); |
||||
phantom.exit(1);
|
||||
} |
||||
} |
||||
|
||||
page.onLoadFinished = function() { |
||||
console.log('::rendering'); |
||||
|
||||
for (var j in config.js) { |
||||
injectVerify(config.js[j]); |
||||
} |
||||
|
||||
page.evaluate(function(chartoptions) { |
||||
// phantomjs doesn't know how to handle .bind, so we override
|
||||
Function.prototype.bind = Function.prototype.bind || function (thisp) { |
||||
var fn = this; |
||||
return function () { |
||||
return fn.apply(thisp, arguments); |
||||
}; |
||||
}; |
||||
|
||||
// generate chart
|
||||
c3.generate(chartoptions); |
||||
|
||||
}, opts); |
||||
|
||||
// setting transition to 0 has proven not to work thus far, but 300ms isn't much
|
||||
// so this is acceptable for now
|
||||
setTimeout(function() { |
||||
page.render(out); |
||||
phantom.exit(); |
||||
}, 300); |
||||
} |
||||
|
||||
// apply css inline because that usually renders better
|
||||
var css = ''; |
||||
for (var i in config.css) { |
||||
css += fs.read(config.css[i]); |
||||
} |
||||
page.content = config.template.format(css); |
After Width: | Height: | Size: 16 KiB |
Loading…
Reference in new issue