exporting.src.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719
  1. /**
  2. * @license Highcharts JS v4.0.3 (2014-07-03)
  3. * Exporting module
  4. *
  5. * (c) 2010-2014 Torstein Honsi
  6. *
  7. * License: www.highcharts.com/license
  8. */
  9. // JSLint options:
  10. /*global Highcharts, document, window, Math, setTimeout */
  11. (function (Highcharts) { // encapsulate
  12. // create shortcuts
  13. var Chart = Highcharts.Chart,
  14. addEvent = Highcharts.addEvent,
  15. removeEvent = Highcharts.removeEvent,
  16. createElement = Highcharts.createElement,
  17. discardElement = Highcharts.discardElement,
  18. css = Highcharts.css,
  19. merge = Highcharts.merge,
  20. each = Highcharts.each,
  21. extend = Highcharts.extend,
  22. math = Math,
  23. mathMax = math.max,
  24. doc = document,
  25. win = window,
  26. isTouchDevice = Highcharts.isTouchDevice,
  27. M = 'M',
  28. L = 'L',
  29. DIV = 'div',
  30. HIDDEN = 'hidden',
  31. NONE = 'none',
  32. PREFIX = 'highcharts-',
  33. ABSOLUTE = 'absolute',
  34. PX = 'px',
  35. UNDEFINED,
  36. symbols = Highcharts.Renderer.prototype.symbols,
  37. defaultOptions = Highcharts.getOptions(),
  38. buttonOffset;
  39. // Add language
  40. extend(defaultOptions.lang, {
  41. printChart: 'Print chart',
  42. downloadPNG: 'Download PNG image',
  43. downloadJPEG: 'Download JPEG image',
  44. downloadPDF: 'Download PDF document',
  45. downloadSVG: 'Download SVG vector image',
  46. contextButtonTitle: 'Chart context menu'
  47. });
  48. // Buttons and menus are collected in a separate config option set called 'navigation'.
  49. // This can be extended later to add control buttons like zoom and pan right click menus.
  50. defaultOptions.navigation = {
  51. menuStyle: {
  52. border: '1px solid #A0A0A0',
  53. background: '#FFFFFF',
  54. padding: '5px 0'
  55. },
  56. menuItemStyle: {
  57. padding: '0 10px',
  58. background: NONE,
  59. color: '#303030',
  60. fontSize: isTouchDevice ? '14px' : '11px'
  61. },
  62. menuItemHoverStyle: {
  63. background: '#4572A5',
  64. color: '#FFFFFF'
  65. },
  66. buttonOptions: {
  67. symbolFill: '#E0E0E0',
  68. symbolSize: 14,
  69. symbolStroke: '#666',
  70. symbolStrokeWidth: 3,
  71. symbolX: 12.5,
  72. symbolY: 10.5,
  73. align: 'right',
  74. buttonSpacing: 3,
  75. height: 22,
  76. // text: null,
  77. theme: {
  78. fill: 'white', // capture hover
  79. stroke: 'none'
  80. },
  81. verticalAlign: 'top',
  82. width: 24
  83. }
  84. };
  85. // Add the export related options
  86. defaultOptions.exporting = {
  87. //enabled: true,
  88. //filename: 'chart',
  89. type: 'image/png',
  90. url: 'http://export.highcharts.com/',
  91. //width: undefined,
  92. //scale: 2
  93. buttons: {
  94. contextButton: {
  95. menuClassName: PREFIX + 'contextmenu',
  96. //x: -10,
  97. symbol: 'menu',
  98. _titleKey: 'contextButtonTitle',
  99. menuItems: [{
  100. textKey: 'printChart',
  101. onclick: function () {
  102. this.print();
  103. }
  104. }, {
  105. separator: true
  106. }, {
  107. textKey: 'downloadPNG',
  108. onclick: function () {
  109. this.exportChart();
  110. }
  111. }, {
  112. textKey: 'downloadJPEG',
  113. onclick: function () {
  114. this.exportChart({
  115. type: 'image/jpeg'
  116. });
  117. }
  118. }, {
  119. textKey: 'downloadPDF',
  120. onclick: function () {
  121. this.exportChart({
  122. type: 'application/pdf'
  123. });
  124. }
  125. }, {
  126. textKey: 'downloadSVG',
  127. onclick: function () {
  128. this.exportChart({
  129. type: 'image/svg+xml'
  130. });
  131. }
  132. }
  133. // Enable this block to add "View SVG" to the dropdown menu
  134. /*
  135. ,{
  136. text: 'View SVG',
  137. onclick: function () {
  138. var svg = this.getSVG()
  139. .replace(/</g, '\n&lt;')
  140. .replace(/>/g, '&gt;');
  141. doc.body.innerHTML = '<pre>' + svg + '</pre>';
  142. }
  143. } // */
  144. ]
  145. }
  146. }
  147. };
  148. // Add the Highcharts.post utility
  149. Highcharts.post = function (url, data, formAttributes) {
  150. var name,
  151. form;
  152. // create the form
  153. form = createElement('form', merge({
  154. method: 'post',
  155. action: url,
  156. enctype: 'multipart/form-data'
  157. }, formAttributes), {
  158. display: NONE
  159. }, doc.body);
  160. // add the data
  161. for (name in data) {
  162. createElement('input', {
  163. type: HIDDEN,
  164. name: name,
  165. value: data[name]
  166. }, null, form);
  167. }
  168. // submit
  169. form.submit();
  170. // clean up
  171. discardElement(form);
  172. };
  173. extend(Chart.prototype, {
  174. /**
  175. * Return an SVG representation of the chart
  176. *
  177. * @param additionalOptions {Object} Additional chart options for the generated SVG representation
  178. */
  179. getSVG: function (additionalOptions) {
  180. var chart = this,
  181. chartCopy,
  182. sandbox,
  183. svg,
  184. seriesOptions,
  185. sourceWidth,
  186. sourceHeight,
  187. cssWidth,
  188. cssHeight,
  189. options = merge(chart.options, additionalOptions); // copy the options and add extra options
  190. // IE compatibility hack for generating SVG content that it doesn't really understand
  191. if (!doc.createElementNS) {
  192. /*jslint unparam: true*//* allow unused parameter ns in function below */
  193. doc.createElementNS = function (ns, tagName) {
  194. return doc.createElement(tagName);
  195. };
  196. /*jslint unparam: false*/
  197. }
  198. // create a sandbox where a new chart will be generated
  199. sandbox = createElement(DIV, null, {
  200. position: ABSOLUTE,
  201. top: '-9999em',
  202. width: chart.chartWidth + PX,
  203. height: chart.chartHeight + PX
  204. }, doc.body);
  205. // get the source size
  206. cssWidth = chart.renderTo.style.width;
  207. cssHeight = chart.renderTo.style.height;
  208. sourceWidth = options.exporting.sourceWidth ||
  209. options.chart.width ||
  210. (/px$/.test(cssWidth) && parseInt(cssWidth, 10)) ||
  211. 600;
  212. sourceHeight = options.exporting.sourceHeight ||
  213. options.chart.height ||
  214. (/px$/.test(cssHeight) && parseInt(cssHeight, 10)) ||
  215. 400;
  216. // override some options
  217. extend(options.chart, {
  218. animation: false,
  219. renderTo: sandbox,
  220. forExport: true,
  221. width: sourceWidth,
  222. height: sourceHeight
  223. });
  224. options.exporting.enabled = false; // hide buttons in print
  225. // prepare for replicating the chart
  226. options.series = [];
  227. each(chart.series, function (serie) {
  228. seriesOptions = merge(serie.options, {
  229. animation: false, // turn off animation
  230. enableMouseTracking: false,
  231. showCheckbox: false,
  232. visible: serie.visible
  233. });
  234. if (!seriesOptions.isInternal) { // used for the navigator series that has its own option set
  235. options.series.push(seriesOptions);
  236. }
  237. });
  238. // generate the chart copy
  239. chartCopy = new Highcharts.Chart(options, chart.callback);
  240. // reflect axis extremes in the export
  241. each(['xAxis', 'yAxis'], function (axisType) {
  242. each(chart[axisType], function (axis, i) {
  243. var axisCopy = chartCopy[axisType][i],
  244. extremes = axis.getExtremes(),
  245. userMin = extremes.userMin,
  246. userMax = extremes.userMax;
  247. if (axisCopy && (userMin !== UNDEFINED || userMax !== UNDEFINED)) {
  248. axisCopy.setExtremes(userMin, userMax, true, false);
  249. }
  250. });
  251. });
  252. // get the SVG from the container's innerHTML
  253. svg = chartCopy.container.innerHTML;
  254. // free up memory
  255. options = null;
  256. chartCopy.destroy();
  257. discardElement(sandbox);
  258. // sanitize
  259. svg = svg
  260. .replace(/zIndex="[^"]+"/g, '')
  261. .replace(/isShadow="[^"]+"/g, '')
  262. .replace(/symbolName="[^"]+"/g, '')
  263. .replace(/jQuery[0-9]+="[^"]+"/g, '')
  264. .replace(/url\([^#]+#/g, 'url(#')
  265. .replace(/<svg /, '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ')
  266. .replace(/ href=/g, ' xlink:href=')
  267. .replace(/\n/, ' ')
  268. // Any HTML added to the container after the SVG (#894)
  269. .replace(/<\/svg>.*?$/, '</svg>')
  270. // Batik doesn't support rgba fills and strokes (#3095)
  271. .replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g, '$1="rgb($2)" $1-opacity="$3"')
  272. /* This fails in IE < 8
  273. .replace(/([0-9]+)\.([0-9]+)/g, function(s1, s2, s3) { // round off to save weight
  274. return s2 +'.'+ s3[0];
  275. })*/
  276. // Replace HTML entities, issue #347
  277. .replace(/&nbsp;/g, '\u00A0') // no-break space
  278. .replace(/&shy;/g, '\u00AD') // soft hyphen
  279. // IE specific
  280. .replace(/<IMG /g, '<image ')
  281. .replace(/height=([^" ]+)/g, 'height="$1"')
  282. .replace(/width=([^" ]+)/g, 'width="$1"')
  283. .replace(/hc-svg-href="([^"]+)">/g, 'xlink:href="$1"/>')
  284. .replace(/id=([^" >]+)/g, 'id="$1"')
  285. .replace(/class=([^" >]+)/g, 'class="$1"')
  286. .replace(/ transform /g, ' ')
  287. .replace(/:(path|rect)/g, '$1')
  288. .replace(/style="([^"]+)"/g, function (s) {
  289. return s.toLowerCase();
  290. });
  291. // IE9 beta bugs with innerHTML. Test again with final IE9.
  292. svg = svg.replace(/(url\(#highcharts-[0-9]+)&quot;/g, '$1')
  293. .replace(/&quot;/g, "'");
  294. return svg;
  295. },
  296. /**
  297. * Submit the SVG representation of the chart to the server
  298. * @param {Object} options Exporting options. Possible members are url, type, width and formAttributes.
  299. * @param {Object} chartOptions Additional chart options for the SVG representation of the chart
  300. */
  301. exportChart: function (options, chartOptions) {
  302. options = options || {};
  303. var chart = this,
  304. chartExportingOptions = chart.options.exporting,
  305. svg = chart.getSVG(merge(
  306. { chart: { borderRadius: 0 } },
  307. chartExportingOptions.chartOptions,
  308. chartOptions,
  309. {
  310. exporting: {
  311. sourceWidth: options.sourceWidth || chartExportingOptions.sourceWidth,
  312. sourceHeight: options.sourceHeight || chartExportingOptions.sourceHeight
  313. }
  314. }
  315. ));
  316. // merge the options
  317. options = merge(chart.options.exporting, options);
  318. // do the post
  319. Highcharts.post(options.url, {
  320. filename: options.filename || 'chart',
  321. type: options.type,
  322. width: options.width || 0, // IE8 fails to post undefined correctly, so use 0
  323. scale: options.scale || 2,
  324. svg: svg
  325. }, options.formAttributes);
  326. },
  327. /**
  328. * Print the chart
  329. */
  330. print: function () {
  331. var chart = this,
  332. container = chart.container,
  333. origDisplay = [],
  334. origParent = container.parentNode,
  335. body = doc.body,
  336. childNodes = body.childNodes;
  337. if (chart.isPrinting) { // block the button while in printing mode
  338. return;
  339. }
  340. chart.isPrinting = true;
  341. // hide all body content
  342. each(childNodes, function (node, i) {
  343. if (node.nodeType === 1) {
  344. origDisplay[i] = node.style.display;
  345. node.style.display = NONE;
  346. }
  347. });
  348. // pull out the chart
  349. body.appendChild(container);
  350. // print
  351. win.focus(); // #1510
  352. win.print();
  353. // allow the browser to prepare before reverting
  354. setTimeout(function () {
  355. // put the chart back in
  356. origParent.appendChild(container);
  357. // restore all body content
  358. each(childNodes, function (node, i) {
  359. if (node.nodeType === 1) {
  360. node.style.display = origDisplay[i];
  361. }
  362. });
  363. chart.isPrinting = false;
  364. }, 1000);
  365. },
  366. /**
  367. * Display a popup menu for choosing the export type
  368. *
  369. * @param {String} className An identifier for the menu
  370. * @param {Array} items A collection with text and onclicks for the items
  371. * @param {Number} x The x position of the opener button
  372. * @param {Number} y The y position of the opener button
  373. * @param {Number} width The width of the opener button
  374. * @param {Number} height The height of the opener button
  375. */
  376. contextMenu: function (className, items, x, y, width, height, button) {
  377. var chart = this,
  378. navOptions = chart.options.navigation,
  379. menuItemStyle = navOptions.menuItemStyle,
  380. chartWidth = chart.chartWidth,
  381. chartHeight = chart.chartHeight,
  382. cacheName = 'cache-' + className,
  383. menu = chart[cacheName],
  384. menuPadding = mathMax(width, height), // for mouse leave detection
  385. boxShadow = '3px 3px 10px #888',
  386. innerMenu,
  387. hide,
  388. hideTimer,
  389. menuStyle,
  390. docMouseUpHandler = function (e) {
  391. if (!chart.pointer.inClass(e.target, className)) {
  392. hide();
  393. }
  394. };
  395. // create the menu only the first time
  396. if (!menu) {
  397. // create a HTML element above the SVG
  398. chart[cacheName] = menu = createElement(DIV, {
  399. className: className
  400. }, {
  401. position: ABSOLUTE,
  402. zIndex: 1000,
  403. padding: menuPadding + PX
  404. }, chart.container);
  405. innerMenu = createElement(DIV, null,
  406. extend({
  407. MozBoxShadow: boxShadow,
  408. WebkitBoxShadow: boxShadow,
  409. boxShadow: boxShadow
  410. }, navOptions.menuStyle), menu);
  411. // hide on mouse out
  412. hide = function () {
  413. css(menu, { display: NONE });
  414. if (button) {
  415. button.setState(0);
  416. }
  417. chart.openMenu = false;
  418. };
  419. // Hide the menu some time after mouse leave (#1357)
  420. addEvent(menu, 'mouseleave', function () {
  421. hideTimer = setTimeout(hide, 500);
  422. });
  423. addEvent(menu, 'mouseenter', function () {
  424. clearTimeout(hideTimer);
  425. });
  426. // Hide it on clicking or touching outside the menu (#2258, #2335, #2407)
  427. addEvent(document, 'mouseup', docMouseUpHandler);
  428. addEvent(chart, 'destroy', function () {
  429. removeEvent(document, 'mouseup', docMouseUpHandler);
  430. });
  431. // create the items
  432. each(items, function (item) {
  433. if (item) {
  434. var element = item.separator ?
  435. createElement('hr', null, null, innerMenu) :
  436. createElement(DIV, {
  437. onmouseover: function () {
  438. css(this, navOptions.menuItemHoverStyle);
  439. },
  440. onmouseout: function () {
  441. css(this, menuItemStyle);
  442. },
  443. onclick: function () {
  444. hide();
  445. item.onclick.apply(chart, arguments);
  446. },
  447. innerHTML: item.text || chart.options.lang[item.textKey]
  448. }, extend({
  449. cursor: 'pointer'
  450. }, menuItemStyle), innerMenu);
  451. // Keep references to menu divs to be able to destroy them
  452. chart.exportDivElements.push(element);
  453. }
  454. });
  455. // Keep references to menu and innerMenu div to be able to destroy them
  456. chart.exportDivElements.push(innerMenu, menu);
  457. chart.exportMenuWidth = menu.offsetWidth;
  458. chart.exportMenuHeight = menu.offsetHeight;
  459. }
  460. menuStyle = { display: 'block' };
  461. // if outside right, right align it
  462. if (x + chart.exportMenuWidth > chartWidth) {
  463. menuStyle.right = (chartWidth - x - width - menuPadding) + PX;
  464. } else {
  465. menuStyle.left = (x - menuPadding) + PX;
  466. }
  467. // if outside bottom, bottom align it
  468. if (y + height + chart.exportMenuHeight > chartHeight && button.alignOptions.verticalAlign !== 'top') {
  469. menuStyle.bottom = (chartHeight - y - menuPadding) + PX;
  470. } else {
  471. menuStyle.top = (y + height - menuPadding) + PX;
  472. }
  473. css(menu, menuStyle);
  474. chart.openMenu = true;
  475. },
  476. /**
  477. * Add the export button to the chart
  478. */
  479. addButton: function (options) {
  480. var chart = this,
  481. renderer = chart.renderer,
  482. btnOptions = merge(chart.options.navigation.buttonOptions, options),
  483. onclick = btnOptions.onclick,
  484. menuItems = btnOptions.menuItems,
  485. symbol,
  486. button,
  487. symbolAttr = {
  488. stroke: btnOptions.symbolStroke,
  489. fill: btnOptions.symbolFill
  490. },
  491. symbolSize = btnOptions.symbolSize || 12;
  492. if (!chart.btnCount) {
  493. chart.btnCount = 0;
  494. }
  495. // Keeps references to the button elements
  496. if (!chart.exportDivElements) {
  497. chart.exportDivElements = [];
  498. chart.exportSVGElements = [];
  499. }
  500. if (btnOptions.enabled === false) {
  501. return;
  502. }
  503. var attr = btnOptions.theme,
  504. states = attr.states,
  505. hover = states && states.hover,
  506. select = states && states.select,
  507. callback;
  508. delete attr.states;
  509. if (onclick) {
  510. callback = function () {
  511. onclick.apply(chart, arguments);
  512. };
  513. } else if (menuItems) {
  514. callback = function () {
  515. chart.contextMenu(
  516. button.menuClassName,
  517. menuItems,
  518. button.translateX,
  519. button.translateY,
  520. button.width,
  521. button.height,
  522. button
  523. );
  524. button.setState(2);
  525. };
  526. }
  527. if (btnOptions.text && btnOptions.symbol) {
  528. attr.paddingLeft = Highcharts.pick(attr.paddingLeft, 25);
  529. } else if (!btnOptions.text) {
  530. extend(attr, {
  531. width: btnOptions.width,
  532. height: btnOptions.height,
  533. padding: 0
  534. });
  535. }
  536. button = renderer.button(btnOptions.text, 0, 0, callback, attr, hover, select)
  537. .attr({
  538. title: chart.options.lang[btnOptions._titleKey],
  539. 'stroke-linecap': 'round'
  540. });
  541. button.menuClassName = options.menuClassName || PREFIX + 'menu-' + chart.btnCount++;
  542. if (btnOptions.symbol) {
  543. symbol = renderer.symbol(
  544. btnOptions.symbol,
  545. btnOptions.symbolX - (symbolSize / 2),
  546. btnOptions.symbolY - (symbolSize / 2),
  547. symbolSize,
  548. symbolSize
  549. )
  550. .attr(extend(symbolAttr, {
  551. 'stroke-width': btnOptions.symbolStrokeWidth || 1,
  552. zIndex: 1
  553. })).add(button);
  554. }
  555. button.add()
  556. .align(extend(btnOptions, {
  557. width: button.width,
  558. x: Highcharts.pick(btnOptions.x, buttonOffset) // #1654
  559. }), true, 'spacingBox');
  560. buttonOffset += (button.width + btnOptions.buttonSpacing) * (btnOptions.align === 'right' ? -1 : 1);
  561. chart.exportSVGElements.push(button, symbol);
  562. },
  563. /**
  564. * Destroy the buttons.
  565. */
  566. destroyExport: function (e) {
  567. var chart = e.target,
  568. i,
  569. elem;
  570. // Destroy the extra buttons added
  571. for (i = 0; i < chart.exportSVGElements.length; i++) {
  572. elem = chart.exportSVGElements[i];
  573. // Destroy and null the svg/vml elements
  574. if (elem) { // #1822
  575. elem.onclick = elem.ontouchstart = null;
  576. chart.exportSVGElements[i] = elem.destroy();
  577. }
  578. }
  579. // Destroy the divs for the menu
  580. for (i = 0; i < chart.exportDivElements.length; i++) {
  581. elem = chart.exportDivElements[i];
  582. // Remove the event handler
  583. removeEvent(elem, 'mouseleave');
  584. // Remove inline events
  585. chart.exportDivElements[i] = elem.onmouseout = elem.onmouseover = elem.ontouchstart = elem.onclick = null;
  586. // Destroy the div by moving to garbage bin
  587. discardElement(elem);
  588. }
  589. }
  590. });
  591. symbols.menu = function (x, y, width, height) {
  592. var arr = [
  593. M, x, y + 2.5,
  594. L, x + width, y + 2.5,
  595. M, x, y + height / 2 + 0.5,
  596. L, x + width, y + height / 2 + 0.5,
  597. M, x, y + height - 1.5,
  598. L, x + width, y + height - 1.5
  599. ];
  600. return arr;
  601. };
  602. // Add the buttons on chart load
  603. Chart.prototype.callbacks.push(function (chart) {
  604. var n,
  605. exportingOptions = chart.options.exporting,
  606. buttons = exportingOptions.buttons;
  607. buttonOffset = 0;
  608. if (exportingOptions.enabled !== false) {
  609. for (n in buttons) {
  610. chart.addButton(buttons[n]);
  611. }
  612. // Destroy the export elements at chart destroy
  613. addEvent(chart, 'destroy', chart.destroyExport);
  614. }
  615. });
  616. }(Highcharts));