0
nodejs 및 jsdom을 사용하여 서버 측에서 생성되는 트리 맵 (차트 유형)에서 svg 코드를 추출하려고합니다. 내가 트리 맵에 차트를 변경하면 https://gist.github.com/TorsteinHonsi/e8a1e6971608523eb8ddjreath, highcharts가있는 서버 측 트리를 작성하십시오
나는 아래의 오류를 얻을 :
는 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
}]
}]
});
을 내가 실행하면 "node 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)
내 컴 오류가 발생 LETE 스크립트는 이것이다 : 필요
/**
* 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
});
그것은 당신이 프로젝트에 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 –