You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

774 lines
19 KiB

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