创建Treemap服务器端与jsdom，highcharts
问题描述：
我想从一个树形图（类型的图表）提取svg代码，它是与nodejs和jsdom生成服务器端。创建Treemap服务器端与jsdom，highcharts
我发现下面的其中出口一“折线图”成功时，我在我的服务器上运行代码：https://gist.github.com/TorsteinHonsi/e8a1e6971608523eb8dd
当我改变图表树形图，我得到下面的错误！
我简单地将代码从线图，以树形图的变化，亦即，i改变这种
Highcharts.chart('container', {
chart: {
forExport: true,
width: 600,
height: 400
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
此（由highcharts从官方树形图示例发现：http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/treemap-coloraxis/）
Highcharts.chart('container', {
chart: {
forExport: true,
width: 600,
height: 400
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
colorValue: 1
}, {
name: 'B',
value: 6,
colorValue: 2
}, {
name: 'C',
value: 4,
colorValue: 3
}, {
name: 'D',
value: 3,
colorValue: 4
}, {
name: 'E',
value: 2,
colorValue: 5
}, {
name: 'F',
value: 2,
colorValue: 6
}, {
name: 'G',
value: 1,
colorValue: 7
}]
}]
});
当运行它与“节点myscript.js”我得到以下错误：
/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:8
(function(D,aa){typeof module==="object"&&module.exports?module.exports=D.document?aa(D):aa:D.Highcharts=aa(D)})(typeof window!=="undefined"?window:this,function(D){function aa(a,b){var c="Highcharts error #"+a+": www.highcharts.com/errors/"+a;if(b)throw Error(c);D.console&&console.log(c)}function pb(a,b,c){this.options=b;this.elem=a;this.prop=c}function E(){var a,b=arguments,c,d={},e=function(a,b){var c,d;typeof a!=="object"&&(a={});for(d in b)b.hasOwnProperty(d)&&(c=b[d],a[d]=c&&typeof c==="object"&&
^
Error: Highcharts error #17: www.highcharts.com/errors/17
at Error (native)
at aa (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:8:256)
at Object.gb.initSeries (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:214:242)
at /opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:236:107
at Array.forEach (native)
at p (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:25:392)
at Object.gb.firstRender (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:236:78)
at Object.gb.init (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:214:135)
at Object.gb.getArgs (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:213:57)
at Object.x.Chart (/opt/dlins/node-v6.3.0-linux-x64/bin/node_modules/highcharts/highcharts.js:212:378)
我comp其产生错误勒特脚本是这样的：需要
/**
* Sample of serverside generation of Highcharts using an extension to jsdom in node.js.
*
* Usage:
* npm install jsdom
* npm install highcharts
* node highcharts-jsdom
*/
/* eslint-env node */
/* eslint no-console: 0 */
var jsdom = require('jsdom'),
fs = require('fs');
// Get the document and window
var doc = jsdom.jsdom('<!doctype html><html><body><div id="container"></div></body></html>'),
win = doc.defaultView;
// Do some modifications to the jsdom document in order to get the SVG bounding
// boxes right.
doc.createElementNS = function (ns, tagName) {
var elem = doc.createElement(tagName);
// Set private namespace to satisfy jsdom's getter
elem._namespaceURI = ns; // eslint-disable-line no-underscore-dangle
/**
* Pass Highcharts' test for SVG capabilities
* @returns {undefined}
*/
elem.createSVGRect = function() {};
/**
* jsdom doesn't compute layout (see https://github.com/tmpvar/jsdom/issues/135).
* This getBBox implementation provides just enough information to get Highcharts
* to render text boxes correctly, and is not intended to work like a general
* getBBox implementation. The height of the boxes are computed from the sum of
* tspans and their font sizes. The width is based on an average width for each glyph.
* It could easily be improved to take font-weight into account.
* For a more exact result we could to create a map over glyph widths for several
* fonts and sizes, but it may not be necessary for the purpose.
* @returns {Object} The bounding box
*/
elem.getBBox = function() {
var lineWidth = 0,
width = 0,
height = 0;
[].forEach.call(elem.children.length ? elem.children : [elem], function (child) {
var fontSize = child.style.fontSize || elem.style.fontSize,
lineHeight,
textLength;
// The font size and lineHeight is based on empirical values, copied from
// the SVGRenderer.fontMetrics function in Highcharts.
if (/px/.test(fontSize)) {
fontSize = parseInt(fontSize, 10);
} else {
fontSize = /em/.test(fontSize) ? parseFloat(fontSize) * 12 : 12;
}
lineHeight = fontSize < 24 ? fontSize + 3 : Math.round(fontSize * 1.2);
textLength = child.textContent.length * fontSize * 0.55;
// Tspans on the same line
if (child.getAttribute('dx') !== '0') {
height += lineHeight;
}
// New line
if (child.getAttribute('dy') !== null) {
lineWidth = 0;
}
lineWidth += textLength;
width = Math.max(width, lineWidth);
});
return {
x: 0,
y: 0,
width: width,
height: height
};
};
return elem;
};
// Require Highcharts with the window shim
var Highcharts = require('highcharts')(win);
// Disable all animation
Highcharts.setOptions({
plotOptions: {
series: {
animation: false,
dataLabels: {
defer: false
}
}
}
});
// Generate the chart into the container
/*
// Working simple line chart
Highcharts.chart('container', {
chart: {
\t \t forExport: true,
\t \t width: 600,
\t \t height: 400
\t },
\t xAxis: {
\t categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
\t \t 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
\t },
\t series: [{
\t data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
\t }]
});
*/
//not working treemap
// http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/treemap-coloraxis/
Highcharts.chart('container', {
\t chart: {
\t \t forExport: true,
\t \t width: 600,
\t \t height: 400
\t },
\t series: [{
\t \t type: 'treemap',
\t \t layoutAlgorithm: 'squarified',
\t \t data: [{
\t \t \t name: 'A',
\t \t \t value: 6,
\t \t \t colorValue: 1
\t \t }, {
\t \t \t name: 'B',
\t \t \t value: 6,
\t \t \t colorValue: 2
\t \t }, {
\t \t \t name: 'C',
\t \t \t value: 4,
\t \t \t colorValue: 3
\t \t }, {
\t \t \t name: 'D',
\t \t \t value: 3,
\t \t \t colorValue: 4
\t \t }, {
\t \t \t name: 'E',
\t \t \t value: 2,
\t \t \t colorValue: 5
\t \t }, {
\t \t \t name: 'F',
\t \t \t value: 2,
\t \t \t colorValue: 6
\t \t }, {
\t \t \t name: 'G',
\t \t \t value: 1,
\t \t \t colorValue: 7
\t \t }]
\t }]
});
var svg = win.document.getElementById('container').innerHTML;
fs.writeFile('chart.svg', svg, function() {
console.log('Wrote ' + svg.length + ' bytes to ' + __dirname + '/chart.svg.'); // eslint-disable-line no-path-concat
});
答
热图和树形图的模组进行特别加载。 node_modules中的库不会自动执行该操作。
因此为VAR Highcharts后加入所需的两行代码：
require('highcharts/modules/heatmap')(Highcharts);
require('highcharts/modules/treemap')(Highcharts);
它看起来像你还没有加入treemap.js模块到项目中。你可以在官方的Highcharts例子中找到它： –
但我已经通过“var Highcharts = require（'highcharts' ）（win）;“，在node_modules/highcharts中存在树形图。我怎么能包括它，否则？ – DavidDunham
我认为这个问题可能与本文中加载模块类似：http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react –