exporting.src.js.soonsu 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627
  1. (function() {
  2. var HC = Highcharts,
  3. Chart = HC.Chart,
  4. addEvent = HC.addEvent,
  5. createElement = HC.createElement,
  6. discardElement = HC.discardElement,
  7. css = HC.css,
  8. merge = HC.merge,
  9. each = HC.each,
  10. extend = HC.extend,
  11. math = Math,
  12. mathMax = math.max,
  13. doc = document,
  14. win = window,
  15. hasTouch = 'ontouchstart' in doc.documentElement,
  16. M = 'M',
  17. L = 'L',
  18. DIV = 'div',
  19. HIDDEN = 'hidden',
  20. NONE = 'none',
  21. PREFIX = 'highcharts-',
  22. ABSOLUTE = 'absolute',
  23. PX = 'px',
  24. defaultOptions = HC.setOptions({
  25. lang: {
  26. downloadPNG: 'Download PNG image',
  27. downloadJPEG: 'Download JPEG image',
  28. downloadPDF: 'Download PDF document',
  29. downloadSVG: 'Download SVG vector image',
  30. exportButtonTitle: 'Export to raster or vector image',
  31. printButtonTitle: 'Print the chart'
  32. }
  33. });
  34. defaultOptions.navigation = {
  35. menuStyle: {
  36. border: '1px solid #A0A0A0',
  37. background: '#FFFFFF'
  38. },
  39. menuItemStyle: {
  40. padding: '0 5px',
  41. background: NONE,
  42. color: '#303030',
  43. fontSize: hasTouch ? '14px' : '11px'
  44. },
  45. menuItemHoverStyle: {
  46. background: '#4572A5',
  47. color: '#FFFFFF'
  48. },
  49. buttonOptions: {
  50. align: 'right',
  51. backgroundColor: {
  52. linearGradient: [0, 0, 0, 20],
  53. stops: [
  54. [0.4, '#F7F7F7'],
  55. [0.6, '#E3E3E3']
  56. ]
  57. },
  58. borderColor: '#B0B0B0',
  59. borderRadius: 3,
  60. borderWidth: 1,
  61. height: 20,
  62. hoverBorderColor: '#909090',
  63. hoverSymbolFill: '#81A7CF',
  64. hoverSymbolStroke: '#4572A5',
  65. symbolFill: '#E0E0E0',
  66. symbolStroke: '#A0A0A0',
  67. symbolX: 11.5,
  68. symbolY: 10.5,
  69. verticalAlign: 'top',
  70. width: 24,
  71. y: 10
  72. }
  73. };
  74. defaultOptions.exporting = {
  75. type: 'image/png',
  76. url: 'http://export.highcharts.com/',
  77. width: 800,
  78. buttons: {
  79. exportButton: {
  80. symbol: 'exportIcon',
  81. x: -10,
  82. symbolFill: '#A8BF77',
  83. hoverSymbolFill: '#768F3E',
  84. _titleKey: 'exportButtonTitle',
  85. menuItems: [{
  86. textKey: 'downloadPNG',
  87. onclick: function() {
  88. this.exportChart();
  89. }
  90. }, {
  91. textKey: 'downloadJPEG',
  92. onclick: function() {
  93. this.exportChart({
  94. type: 'image/jpeg'
  95. });
  96. }
  97. }, {
  98. textKey: 'downloadPDF',
  99. onclick: function() {
  100. this.exportChart({
  101. type: 'application/pdf'
  102. });
  103. }
  104. }, {
  105. textKey: 'downloadSVG',
  106. onclick: function() {
  107. this.exportChart({
  108. type: 'image/svg+xml'
  109. });
  110. }
  111. }]
  112. },
  113. printButton: {
  114. symbol: 'printIcon',
  115. x: -36,
  116. symbolFill: '#B5C9DF',
  117. hoverSymbolFill: '#779ABF',
  118. _titleKey: 'printButtonTitle',
  119. onclick: function() {
  120. this.print();
  121. }
  122. }
  123. }
  124. };
  125. extend(Chart.prototype, {
  126. getSVG: function(additionalOptions) {
  127. var chart = this,
  128. chartCopy,
  129. sandbox,
  130. svg,
  131. seriesOptions,
  132. config,
  133. pointOptions,
  134. pointMarker,
  135. options = merge(chart.options, additionalOptions);
  136. if (!doc.createElementNS) {
  137. doc.createElementNS = function(ns, tagName) {
  138. var elem = doc.createElement(tagName);
  139. elem.getBBox = function() {
  140. return chart.renderer.Element.prototype.getBBox.apply({ element: elem });
  141. };
  142. return elem;
  143. };
  144. }
  145. sandbox = createElement(DIV, null, {
  146. position: ABSOLUTE,
  147. top: '-9999em',
  148. width: chart.chartWidth + PX,
  149. height: chart.chartHeight + PX
  150. }, doc.body);
  151. extend(options.chart, {
  152. renderTo: sandbox,
  153. forExport: true
  154. });
  155. options.exporting.enabled = false;
  156. options.chart.plotBackgroundImage = null;
  157. options.series = [];
  158. each(chart.series, function(serie) {
  159. seriesOptions = serie.options;
  160. seriesOptions.animation = false;
  161. seriesOptions.showCheckbox = false;
  162. if (seriesOptions && seriesOptions.marker && /^url\(/.test(seriesOptions.marker.symbol)) {
  163. seriesOptions.marker.symbol = 'circle';
  164. }
  165. seriesOptions.data = [];
  166. each(serie.data, function(point) {
  167. config = point.config;
  168. pointOptions = {
  169. x: point.x,
  170. y: point.y,
  171. name: point.name
  172. };
  173. if (typeof config == 'object' && point.config && config.constructor != Array) {
  174. extend(pointOptions, config);
  175. }
  176. seriesOptions.data.push(pointOptions);
  177. pointMarker = point.config && point.config.marker;
  178. if (pointMarker && /^url\(/.test(pointMarker.symbol)) {
  179. delete pointMarker.symbol;
  180. }
  181. });
  182. options.series.push(seriesOptions);
  183. });
  184. chartCopy = new Highcharts.Chart(options);
  185. svg = chartCopy.container.innerHTML;
  186. options = null;
  187. chartCopy.destroy();
  188. discardElement(sandbox);
  189. svg = svg
  190. .replace(/zIndex="[^"]+"/g, '')
  191. .replace(/isShadow="[^"]+"/g, '')
  192. .replace(/symbolName="[^"]+"/g, '')
  193. .replace(/jQuery[0-9]+="[^"]+"/g, '')
  194. .replace(/isTracker="[^"]+"/g, '')
  195. .replace(/url\([^#]+#/g, 'url(#')
  196. .replace(/id=([^" >]+)/g, 'id="$1"')
  197. .replace(/class=([^" ]+)/g, 'class="$1"')
  198. .replace(/ transform /g, ' ')
  199. .replace(/:(path|rect)/g, '$1')
  200. .replace(/style="([^"]+)"/g, function(s) {
  201. return s.toLowerCase();
  202. });
  203. svg = svg.replace(/(url\(#highcharts-[0-9]+)"/g, '$1')
  204. .replace(/"/g, "'");
  205. if (svg.match(/ xmlns="/g).length == 2) {
  206. svg = svg.replace(/xmlns="[^"]+"/, '');
  207. }
  208. return svg;
  209. },
  210. exportChart: function(options, chartOptions) {
  211. var form,
  212. chart = this,
  213. svg = chart.getSVG(chartOptions);
  214. options = merge(chart.options.exporting, options);
  215. form = createElement('form', {
  216. method: 'post',
  217. action: options.url
  218. }, {
  219. display: NONE
  220. }, doc.body);
  221. each(['filename', 'type', 'width', 'svg'], function(name) {
  222. createElement('input', {
  223. type: HIDDEN,
  224. name: name,
  225. value: {
  226. filename: options.filename || 'chart',
  227. type: options.type,
  228. width: options.width,
  229. svg: svg
  230. }[name]
  231. }, null, form);
  232. });
  233. form.submit();
  234. discardElement(form);
  235. },
  236. print: function() {
  237. var chart = this,
  238. container = chart.container,
  239. origDisplay = [],
  240. origParent = container.parentNode,
  241. body = doc.body,
  242. childNodes = body.childNodes;
  243. if (chart.isPrinting) {
  244. return;
  245. }
  246. chart.isPrinting = true;
  247. each(childNodes, function(node, i) {
  248. if (node.nodeType == 1) {
  249. origDisplay[i] = node.style.display;
  250. node.style.display = NONE;
  251. }
  252. });
  253. body.appendChild(container);
  254. win.print();
  255. setTimeout(function() {
  256. origParent.appendChild(container);
  257. each(childNodes, function(node, i) {
  258. if (node.nodeType == 1) {
  259. node.style.display = origDisplay[i];
  260. }
  261. });
  262. chart.isPrinting = false;
  263. }, 1000);
  264. },
  265. contextMenu: function(name, items, x, y, width, height) {
  266. var chart = this,
  267. navOptions = chart.options.navigation,
  268. menuItemStyle = navOptions.menuItemStyle,
  269. chartWidth = chart.chartWidth,
  270. chartHeight = chart.chartHeight,
  271. cacheName = 'cache-'+ name,
  272. menu = chart[cacheName],
  273. menuPadding = mathMax(width, height),
  274. boxShadow = '3px 3px 10px #888',
  275. innerMenu,
  276. hide,
  277. menuStyle;
  278. if (!menu) {
  279. chart[cacheName] = menu = createElement(DIV, {
  280. className: PREFIX + name
  281. }, {
  282. position: ABSOLUTE,
  283. zIndex: 1000,
  284. padding: menuPadding + PX
  285. }, chart.container);
  286. innerMenu = createElement(DIV, null,
  287. extend({
  288. MozBoxShadow: boxShadow,
  289. WebkitBoxShadow: boxShadow,
  290. boxShadow: boxShadow
  291. }, navOptions.menuStyle) , menu);
  292. hide = function() {
  293. css(menu, { display: NONE });
  294. };
  295. addEvent(menu, 'mouseleave', hide);
  296. each(items, function(item) {
  297. if (item) {
  298. var div = createElement(DIV, {
  299. onmouseover: function() {
  300. css(this, navOptions.menuItemHoverStyle);
  301. },
  302. onmouseout: function() {
  303. css(this, menuItemStyle);
  304. },
  305. innerHTML: item.text || HC.getOptions().lang[item.textKey]
  306. }, extend({
  307. cursor: 'pointer'
  308. }, menuItemStyle), innerMenu);
  309. div[hasTouch ? 'ontouchstart' : 'onclick'] = function() {
  310. hide();
  311. item.onclick.apply(chart, arguments);
  312. };
  313. }
  314. });
  315. chart.exportMenuWidth = menu.offsetWidth;
  316. chart.exportMenuHeight = menu.offsetHeight;
  317. }
  318. menuStyle = { display: 'block' };
  319. if (x + chart.exportMenuWidth > chartWidth) {
  320. menuStyle.right = (chartWidth - x - width - menuPadding) + PX;
  321. } else {
  322. menuStyle.setLeft((x - menuPadding) + PX);
  323. }
  324. if (y + height + chart.exportMenuHeight > chartHeight) {
  325. menuStyle.bottom = (chartHeight - y - menuPadding) + PX;
  326. } else {
  327. menuStyle.top = (y + height - menuPadding) + PX;
  328. }
  329. css(menu, menuStyle);
  330. },
  331. addButton: function(options) {
  332. var chart = this,
  333. renderer = chart.renderer,
  334. btnOptions = merge(chart.options.navigation.buttonOptions, options),
  335. onclick = btnOptions.onclick,
  336. menuItems = btnOptions.menuItems,
  337. buttonWidth = btnOptions.width,
  338. buttonHeight = btnOptions.height,
  339. box,
  340. symbol,
  341. button,
  342. borderWidth = btnOptions.borderWidth,
  343. boxAttr = {
  344. stroke: btnOptions.borderColor
  345. },
  346. symbolAttr = {
  347. stroke: btnOptions.symbolStroke,
  348. fill: btnOptions.symbolFill
  349. };
  350. if (btnOptions.enabled === false) {
  351. return;
  352. }
  353. function revert() {
  354. symbol.attr(symbolAttr);
  355. box.attr(boxAttr);
  356. }
  357. box = renderer.rect(
  358. 0,
  359. 0,
  360. buttonWidth,
  361. buttonHeight,
  362. btnOptions.borderRadius,
  363. borderWidth
  364. )
  365. .align(btnOptions, true)
  366. .attr(extend({
  367. fill: btnOptions.backgroundColor,
  368. 'stroke-width': borderWidth,
  369. zIndex: 19
  370. }, boxAttr)).add();
  371. button = renderer.rect(
  372. 0,
  373. 0,
  374. buttonWidth,
  375. buttonHeight,
  376. 0
  377. )
  378. .align(btnOptions)
  379. .attr({
  380. fill: 'rgba(255, 255, 255, 0.001)',
  381. title: HC.getOptions().lang[btnOptions._titleKey],
  382. zIndex: 21
  383. }).css({
  384. cursor: 'pointer'
  385. })
  386. .on('mouseover', function() {
  387. symbol.attr({
  388. stroke: btnOptions.hoverSymbolStroke,
  389. fill: btnOptions.hoverSymbolFill
  390. });
  391. box.attr({
  392. stroke: btnOptions.hoverBorderColor
  393. });
  394. })
  395. .on('mouseout', revert)
  396. .on('click', revert)
  397. .add();
  398. if (menuItems) {
  399. onclick = function(e) {
  400. revert();
  401. var bBox = button.getBBox();
  402. chart.contextMenu('export-menu', menuItems, bBox.x, bBox.y, buttonWidth, buttonHeight);
  403. };
  404. }
  405. button.on('click', function() {
  406. onclick.apply(chart, arguments);
  407. });
  408. symbol = renderer.symbol(
  409. btnOptions.symbol,
  410. btnOptions.symbolX,
  411. btnOptions.symbolY,
  412. (btnOptions.symbolSize || 12) / 2
  413. )
  414. .align(btnOptions, true)
  415. .attr(extend(symbolAttr, {
  416. 'stroke-width': btnOptions.symbolStrokeWidth || 1,
  417. zIndex: 20
  418. })).add();
  419. }
  420. });
  421. HC.Renderer.prototype.symbols.exportIcon = function(x, y, radius) {
  422. return [
  423. M,
  424. x - radius, y + radius,
  425. L,
  426. x + radius, y + radius,
  427. x + radius, y + radius * 0.5,
  428. x - radius, y + radius * 0.5,
  429. 'Z',
  430. M,
  431. x, y + radius * 0.5,
  432. L,
  433. x - radius * 0.5, y - radius / 3,
  434. x - radius / 6, y - radius / 3,
  435. x - radius / 6, y - radius,
  436. x + radius / 6, y - radius,
  437. x + radius / 6, y - radius / 3,
  438. x + radius * 0.5, y - radius / 3,
  439. 'Z'
  440. ];
  441. };
  442. HC.Renderer.prototype.symbols.printIcon = function(x, y, radius) {
  443. return [
  444. M,
  445. x - radius, y + radius * 0.5,
  446. L,
  447. x + radius, y + radius * 0.5,
  448. x + radius, y - radius / 3,
  449. x - radius, y - radius / 3,
  450. 'Z',
  451. M,
  452. x - radius * 0.5, y - radius / 3,
  453. L,
  454. x - radius * 0.5, y - radius,
  455. x + radius * 0.5, y - radius,
  456. x + radius * 0.5, y - radius / 3,
  457. 'Z',
  458. M,
  459. x - radius * 0.5, y + radius * 0.5,
  460. L,
  461. x - radius * 0.75, y + radius,
  462. x + radius * 0.75, y + radius,
  463. x + radius * 0.5, y + radius * 0.5,
  464. 'Z'
  465. ];
  466. };
  467. Chart.prototype.callbacks.push(function(chart) {
  468. var n,
  469. exportingOptions = chart.options.exporting,
  470. buttons = exportingOptions.buttons;
  471. if (exportingOptions.enabled !== false) {
  472. for (n in buttons) {
  473. chart.addButton(buttons[n]);
  474. }
  475. }
  476. });
  477. })();