bug(ej2-5314): fixed the build failure on process-api issue fixed
This commit is contained in:
pipeline
Родитель
4ca4e0cfd7
Коммит
ed17e35f56
352
index.html
352
index.html
|
|
@ -2,127 +2,315 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<title>Essential JS 2 (Preview)</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<title>Essential JS 2 (Preview)</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Essential JS 2 (Preview)" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="author" content="Syncfusion" />
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="src/common/lib/highlightjs/styles/default.css" rel="stylesheet" />
|
||||
<link href="styles/material.css" rel="stylesheet" id="themelink" />
|
||||
<style rel="stylesheet" id="themelink"></style>
|
||||
<link href="styles/index.css" rel="stylesheet" />
|
||||
<script src="src/common.min.js" type="text/javascript"></script>
|
||||
<script src="src/common.min.js" type="text/javascript" ></script>
|
||||
<script type="text/javascript" src="https://syncfusion.atlassian.net/s/d41d8cd98f00b204e9800998ecf8427e-T/tu9duo/b/c/7ebd7d8b8f8cafb14c7b0966803e5701/_/download/batch/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector/com.atlassian.jira.collector.plugin.jira-issue-collector-plugin:issuecollector.js?locale=en-US&collectorId=b1db4791"></script>
|
||||
</head>
|
||||
|
||||
<body class="e-view">
|
||||
<div class="sample-browser">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
||||
</svg>
|
||||
<body class='e-view' aria-busy="true">
|
||||
<div class="sample-browser e-view" rol>
|
||||
<div class="sb-mobile-overlay sb-hide"></div>
|
||||
<div class="sb-mobile-left-pane sb-hide">
|
||||
|
||||
</div>
|
||||
<div class="sb-header" role="banner">
|
||||
<div class="sb-title">
|
||||
<a href="index.html">
|
||||
<div class="sb-logo" title="Essential JS 2 (Preview)"></div>
|
||||
</a>
|
||||
<div class="sb-mobile-right-pane sb-hide">
|
||||
<div class="sb-mobile-preference sb-hide"></div>
|
||||
<div class="sb-mobile-prop-pane sb-hide"></div>
|
||||
<div class="sb-mobile-right-pane-close sb-icons"></div>
|
||||
</div>
|
||||
<div id='sample-header' class="sb-header e-view" role="banner">
|
||||
<div class='sb-header-left sb-left sb-table'>
|
||||
<div class='sb-header-item sb-table-cell'>
|
||||
<div id="sb-toggle-left" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-Hamburger" aria-label="toggle all controls navigation" title='toggle leftpane'></div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell'>
|
||||
<div id='sb-header-text' class='e-sb-header-text'>
|
||||
<span class='sb-header-text-left'>Essential JS 2 for</span>
|
||||
<span class='sb-header-text-right'>TypeScript</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-lang-toggler-wrapper'>
|
||||
<span id='sb-switcher' role="button" tabindex="0" class='sb-lang-toggler sb-icons sb-icon-Dropdown' aria-label="change the samplebrowser"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-right sb-right sb-table'>
|
||||
<div class="sb-header-item sb-table-cell">
|
||||
<div id="header-theme-switcher" role="button" tabindex="0" class="theme-wrapper" title='change theme of sample browser'>
|
||||
<div id="sb-theme-text" class="sb-theme-text">
|
||||
<span class="sb-header-text-left">CHOOSE THEME</span>
|
||||
</div>
|
||||
<div class="sb-theme-switcher-wrapper">
|
||||
<span id="sb-theme-switcher" class="sb-theme-switch sb-icons sb-icon-Dropdown"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-search-wrapper'>
|
||||
<div class='sb-search-btn' id='sb-trigger-search' role="button" tabindex="0" aria-label="toggle sample search" title="toggle sample searchC">
|
||||
<span class='sb-settings sb-icons sb-icon-Search'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-header-item sb-table-cell sb-settings-wrapper'>
|
||||
<div class='sb-setting-btn' role="button" tabindex="0" aria-label="toggle settings menu" tabindex="">
|
||||
<span class='sb-settings sb-icons sb-icon-Settings-Preferences'></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-header-item sb-table-cell sb-header-settings sb-icons"></div>
|
||||
<div class="sb-header-splitter sb-download-splitter"></div>
|
||||
<div class='sb-header-item sb-table-cell sb-download-wrapper'>
|
||||
<button id='download-now' class='sb-download-btn' >
|
||||
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blankss">
|
||||
<span class='sb-download-text'>Download Now</span>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div id="themeswitcher" class="themeicon"><img id="themeswitcher-icon" src='styles/images/sb_icons/SB_Switcher_icon_material.png'></div>
|
||||
<div id="selectdiv" class='e-hidden'>
|
||||
<ul id="themelist" class="options">
|
||||
<li class="e-list" id="material"><span class='switch-text'>Material</span><span class='switch-icon material'></span></a></li>
|
||||
<li class="e-list" id="fabric"><span class='switch-text'>Fabric</span><span class='switch-icon fabric'></span></a></li>
|
||||
<li class="e-list" id="bootstrap"><span class='switch-text'>Bootstrap</span><span class='switch-icon bootstrap'></span></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div id='sb-popup-section' class='sb-popups'>
|
||||
<div id='sb-switcher-popup' role='navigation' class='sb-switch-popup'>
|
||||
<ul id='switch-sb' role="list">
|
||||
<li class='sb-current' role="listiem">TypeScript</li>
|
||||
<li role="listitem">
|
||||
<a id='angular'>Angular</a>
|
||||
</li>
|
||||
<li role="listitem">
|
||||
<a id='react'>React</a>
|
||||
</li>
|
||||
<li role="listitem">
|
||||
<a id='javascript'>JavaScript</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='theme-switcher-popup' class='sb-theme-popup'>
|
||||
<ul id="themelist" class="options" role="list">
|
||||
<li class='active' id="material" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Material</span>
|
||||
</li>
|
||||
<li id="fabric" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Fabric</span>
|
||||
</li>
|
||||
<li class="e-list" id="bootstrap" role="listitem">
|
||||
<span class='sb-icons sb-theme-select sb-icon-icon-selection'></span>
|
||||
<span class="switch-text">Bootstrap</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id='settings-popup' class='sb-setting-popup'>
|
||||
<div class='sb-setting-header'>
|
||||
<span> Preferences
|
||||
</span>
|
||||
</div>
|
||||
<div class='sb-setting-content'>
|
||||
<div class='sb-setting-item sb-setting-theme-section'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Palette'></div>
|
||||
<div class='sb-setting-text'>Theme Selection</div>
|
||||
</div>
|
||||
<div class='setting-content setting-theme-change'>
|
||||
<select id='sb-setting-theme' class='sb-setting-theme-select'>
|
||||
<option value="material">Material</option>
|
||||
<option value="fabric">Fabric</option>
|
||||
<option value="bootstrap">bootstrap</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-setting-item sb-responsive-section'>
|
||||
<div class='setting-label'>
|
||||
<div class='sb-icons sb-setting-icons sb-icon-Responsive'></div>
|
||||
<div class='sb-setting-text'>Mode Selection</div>
|
||||
</div>
|
||||
<div class='setting-content btn-group setting-responsive'>
|
||||
<div id='touch' role="button" tabindex="0" class="sb-responsive-items" title="Increased padding for actionable items to accommodate user touches">Touch</div>
|
||||
<div id='mouse' role="button" tabindex="0" class="sb-responsive-items" title="Default control sizes, optimized for use with mouse">Mouse</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sb-content" role="main">
|
||||
<div id="left-panel" class="left-panel">
|
||||
<div class="left-fluid">
|
||||
<div class="list-search"></div>
|
||||
<div class="left-tree-head">
|
||||
<div id="tree-back">
|
||||
<span class="e-icons e-icon-back" id="back-btn-icon" style="display:none;"></span>
|
||||
<span class="e-text" id="sidebar-title">ShowCase</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="control-list"> </div>
|
||||
<div class="sb-content e-view">
|
||||
<div class="sb-body-overlay">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-panel">
|
||||
<div class="sample-nav">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="slide-nav" aria-controls="left-panel" role="navigation">
|
||||
<div id="slide-nav" class="e-slide-nav e-icons" aria-label="all controls navigation"></div>
|
||||
</div>
|
||||
<div id="sample-head">
|
||||
<div class="sample-name"></div>
|
||||
</div>
|
||||
<div id="switch" class='switcher hidden e-bigger'>
|
||||
<button id="mouse" class="active" title="Default control sizes, optimized for use with mouse">Mouse</button>
|
||||
<div class="switch-splittor"></div>
|
||||
<button id="touch" title="Increased padding for actionable items to accommodate user touches">Touch</button>
|
||||
</div>
|
||||
<div class='nav-btn-group'>
|
||||
<div class='nav-btn'>
|
||||
<button id="prev-sample" class="btn btn-default e-icon-prev e-icons" aria-label="previous sample"></button>
|
||||
</div>
|
||||
<div class='nav-btn'>
|
||||
<button id="next-sample" class="btn btn-default e-icon-next e-icons" aria-label="next sample"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="e-search-overlay sb-hide">
|
||||
<div class='sb-search-input' id='search-input-wrapper'>
|
||||
<input type='text' aria-required="true" class="e-icons" id='search-input' class='e-icons' placeholder="Search here..." aria-label="search samples"/>
|
||||
<span class='e-icons sb-search-icon'></span>
|
||||
</div>
|
||||
<div id='search-popup' class='sb-search-result'></div>
|
||||
</div>
|
||||
<div class='sb-left-pane e-view'>
|
||||
<div class="sb-left-pane-header">
|
||||
<div class="sb-header-top">
|
||||
<div class="sb-ej2">
|
||||
<div class="sb-mobile-logo"></div>
|
||||
<div class="sb-name">Essential JS 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="control-container">
|
||||
<div class="control-fluid">
|
||||
<div class="container-fluid">
|
||||
<div class="sb-home">
|
||||
<div class="sb-home-link sb-icons sb-icon-Home"></div>
|
||||
<div class="sb-home-text">
|
||||
<span>HOME</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-control-navigation'>
|
||||
<div id="controlTree" class='e-view'></div>
|
||||
<div id="controlSamples">
|
||||
<div id="sb-left-back" class="back" role="button" tabindex="0">
|
||||
<div class="e-icons back-icon"></div>
|
||||
<div class='control-name'>ALL CONTROLS</div>
|
||||
</div>
|
||||
<div id="controlList" class='e-view sb-control-list-top'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-left-footer'>
|
||||
<div class="sb-mobile-header-buttons">
|
||||
<a href='https://www.syncfusion.com/products/essential-js2' target="_blank">
|
||||
<div class="sb-mobile-header-button">
|
||||
About</div></a>
|
||||
<a href='https://www.syncfusion.com/downloads/essential-js2' target="_blank" ><div class="sb-mobile-header-button">Pricing</div></a>
|
||||
</div>
|
||||
<div class='sb-left-footer-links'>
|
||||
|
||||
<div id="control-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-right-pane e-view' id='right-pane'>
|
||||
<div class="sb-content-overlay">
|
||||
<div class="sb-loading">
|
||||
<svg class="circular" height="40" width="40">
|
||||
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6" stroke-miterlimit="10" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-desktop-wrapper'>
|
||||
<div id='component-name' role='header' class='sb-component-name sb-rightpane-padding'>
|
||||
<span class='sb-sample-text'>Chart</span>
|
||||
</div>
|
||||
<div id='sample-bread-crumb' class='sb-bread-crumb sb-rightpane-padding'>
|
||||
<div class='sb-bread-crumb-text'>
|
||||
<div class='category-text bread-ctext'> </div>
|
||||
<div class='category-seperator sb-icons sb-icon-Next seperator'> </div>
|
||||
<div class='component bread-ctext'></div>
|
||||
<div class="component-seperator sb-icons sb-icon-Next seperator"> </div>
|
||||
<div class='crumb-sample '></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="source-panel" class="hidden">
|
||||
<div id="source-tab">
|
||||
<ul class='nav nav-tabs' role='tablist'>
|
||||
<li class="active" id='tcode' role='presentation'><a id='ttab' role='tab' aria-controls='ts-tab' aria-selected='true'>Code</a></li>
|
||||
<li id='hcode' role='presentation'><a id='htab' role='tab' aria-controls='html-tab'>Markup</a></li>
|
||||
<li id='plnk'><a id='plnkr'>Open in Plunker</a></li>
|
||||
</ul>
|
||||
<div id="ts-tab" role="tabpanel" aria-hidden="true" class="lang-tab">
|
||||
<div class="source-cnt" tabindex="1">
|
||||
<div id="ts-source" class="javascript src"></div>
|
||||
</div>
|
||||
<div class='sb-action-description sb-rightpane-padding'></div>
|
||||
<div class='sb-content-tab' id='content-tab'>
|
||||
<div id="sb-content" class='sb-content-section'>
|
||||
<div id='sb-content-header' class="e-header sb-content-tab-header">
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-Demo"></span> DEMO </div>
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-Code"></span> SOURCE </div>
|
||||
<div>
|
||||
<span class="sb-icons sb-icon-API"></span> API </div>
|
||||
</div>
|
||||
<div id="html-tab" role="tabpanel" class="lang-tab">
|
||||
<div id="html-tab-scroll" class="source-cnt" tabindex="1">
|
||||
<div id="html-source" class="xml src"></div>
|
||||
<div class="e-content sb-sample-content-area">
|
||||
<div>
|
||||
<div class='sb-demo-section'>
|
||||
<div class="control-fluid">
|
||||
<div class="container-fluid">
|
||||
<div id="control-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='sb-source-section'>
|
||||
<div id='sb-source-tab' class="">
|
||||
<div id='sb-content-header' class="e-header sb-content-tab-header">
|
||||
<div>
|
||||
<span class="sb-ts-snippet-header"></span> tsfileName </div>
|
||||
<div>
|
||||
<span class="sb-html-snippet-header"></span> htmlfileName </div>
|
||||
</div>
|
||||
<div class="e-content sb-sample-content-area">
|
||||
<div><div id= "ts-src-tab" class="ts-source-content sb-src-code javascript">ts Content</div></div>
|
||||
<div><div id="html-src-tab" class="html-source-content sb-src-code xml">html Content</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class='sb-api-section'>
|
||||
|
||||
<div id='api-grid'>
|
||||
<script id="template" type="text/x-template">
|
||||
<a href="${link}" target="_blank">${name}</a>
|
||||
</script>
|
||||
<script id="template-description" type="text/x-template">
|
||||
<div class='sb-sample-description'>
|
||||
<div class='sb-api-content'>${description}</div>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='footer' role="contentinfo">
|
||||
<div class="footer-left">
|
||||
<span>Copyright © 2001-2017 Syncfusion Inc.</span>
|
||||
<div class='description-section sb-rightpane-padding'>
|
||||
</div>
|
||||
<div class="sb-footer">
|
||||
<div class="sb-footer-left">
|
||||
<div class="sb-footer-links">
|
||||
<a href="http://ej2.syncfusion.com/documentation/" target="_blank">
|
||||
<div class="sb-footer-link">Documentation</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/forums/" target="_blank">
|
||||
<div class="sb-footer-link">Forum</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/blogs/" target="_blank">
|
||||
<div class="sb-footer-link">Blog</div>
|
||||
</a>
|
||||
<a href="https://www.syncfusion.com/kb/" target="_blank">
|
||||
<div class="sb-footer-link">Knowledge Base</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="sb-footer-copyright">Copyright © 2001-2017 Syncfusion Inc.</div>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="//www.syncfusion.com" target="_blank">
|
||||
<div class="footer-logo"></div>
|
||||
<div class="sb-footer-logo">
|
||||
<a href="https://www.syncfusion.com/" target="_blank">
|
||||
<div class="sb-footer-logo-icon"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='sb-mobilefooter e-view sample-navigation' id='mobile-footer'>
|
||||
<button id='mobile-prev-sample' class="sb-navigation-prev sb-left" aria-label="previous sample">
|
||||
PREVIOUS
|
||||
</button>
|
||||
<button id='mobile-next-sample' class="sb-navigation-next sb-right" aria-label="next sample">
|
||||
NEXT
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="src/common/index.min.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
@ -37,7 +37,9 @@
|
|||
"@types/jasmine-ajax": "^3.1.27",
|
||||
"@types/requirejs": "^2.1.26",
|
||||
"@types/signals": "0.0.16",
|
||||
"elasticlunr": "0.9.5",
|
||||
"fuse.js": "^3.2.0",
|
||||
"markdown-it": "^8.4.0",
|
||||
"es6-promise": "^3.2.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-sass": "^3.1.0",
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -148,7 +148,7 @@
|
|||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Ajax</code> library. The content of panel “Video Recording” is loaded from external element.
|
||||
This sample demonstrates rendering <code>Accordion</code> content from external source using <code>Ajax</code> library. The content of panel “Network & Connectivity” is loaded from external element.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * AutoComplete Default functionality Sample\n */\nimport { AutoComplete } from '@syncfusion/ej2-dropdowns';\n\n\n let sportsData: string[] = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n let atcObj: AutoComplete = new AutoComplete({\n dataSource: sportsData,\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 250px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * AutoComplete Default functionality Sample\n */\nimport { AutoComplete } from '@syncfusion/ej2-dropdowns';\n\n\n let sportsData: string[] = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n let atcObj: AutoComplete = new AutoComplete({\n dataSource: sportsData,\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 250px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';\n\n/**\n * Default CheckBox sample\n */\n\n\n let checkBoxObj: CheckBox = new CheckBox({ label: 'CheckBox: true', checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n\n checkBoxObj = new CheckBox({ label: 'Checked, Disabled', disabled: true, checked: true });\n checkBoxObj.appendTo('#disabled');\n\n checkBoxObj = new CheckBox({ label: 'Indeterminate, Disabled', indeterminate: true, disabled: true });\n checkBoxObj.appendTo('#indeterminate');\n\n // function to handle the CheckBox change event\n function onChange(args: ChangeEventArgs): void {\n this.label = 'CheckBox: ' + args.checked;\n }\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"checkbox-control\">\n <div class=\"row\">\n <input id=\"checked\" type=\"checkbox\">\n </div>\n <div class=\"row\">\n <input id=\"disabled\" type=\"checkbox\">\n </div>\n <div class=\"row\">\n <input id=\"indeterminate\" type=\"checkbox\">\n </div>\n </div>\n</div>\n\n<style>\n /* CheckBox Styles */\n .checkbox-control {\n margin-left: 40%;\n margin-top: 11%;\n }\n\n @media only screen and (max-width: 700px) {\n .checkbox-control {\n margin-left: 35%;\n }\n\n .control-section {\n min-height: 200px;\n }\n }\n\n @media only screen and (max-width: 500px) {\n .control-section {\n min-height: 200px;\n }\n\n .checkbox-control {\n margin-top: 27%;\n margin-left: 20%;\n margin-bottom: 27%;\n }\n }\n\n .control-section .row {\n margin-top: 20px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';\n\n/**\n * Default CheckBox sample\n */\n\n\n let checkBoxObj: CheckBox = new CheckBox({ label: 'CheckBox: true', checked: true, change: onChange });\n checkBoxObj.appendTo('#checked');\n\n checkBoxObj = new CheckBox({ label: 'Checked, Disabled', disabled: true, checked: true });\n checkBoxObj.appendTo('#disabled');\n\n checkBoxObj = new CheckBox({ label: 'Indeterminate, Disabled', indeterminate: true, disabled: true });\n checkBoxObj.appendTo('#indeterminate');\n\n // function to handle the CheckBox change event\n function onChange(args: ChangeEventArgs): void {\n this.label = 'CheckBox: ' + args.checked;\n }\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"checkbox-control\">\n <div class=\"row\">\n <input id=\"checked\" type=\"checkbox\">\n </div>\n <div class=\"row\">\n <input id=\"disabled\" type=\"checkbox\">\n </div>\n <div class=\"row\">\n <input id=\"indeterminate\" type=\"checkbox\">\n </div>\n </div>\n</div>\n\n<style>\n /* CheckBox Styles */\n .checkbox-control {\n margin-left: 40%;\n margin-top: 11%;\n }\n\n @media only screen and (max-width: 700px) {\n .checkbox-control {\n margin-left: 35%;\n }\n\n .control-section {\n min-height: 200px;\n }\n }\n\n @media only screen and (max-width: 500px) {\n .control-section {\n min-height: 200px;\n }\n\n .checkbox-control {\n margin-top: 27%;\n margin-left: 20%;\n margin-bottom: 27%;\n }\n }\n\n .control-section .row {\n margin-top: 20px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { RadioButton } from '@syncfusion/ej2-buttons';\n\n/**\n * Default RadioButton sample\n */\n\n //Checked State\n let radioButton: RadioButton = new RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});\n radioButton.appendTo('#radio1');\n\n radioButton = new RadioButton({label: 'Net Banking', name: 'payment', value: 'netbanking'});\n radioButton.appendTo('#radio2');\n\n radioButton = new RadioButton({label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery'});\n radioButton.appendTo('#radio3');\n\n radioButton = new RadioButton({label: 'Other Wallets', name: 'payment', value: 'others'});\n radioButton.appendTo('#radio4');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"radio-control\">\n <h4 class=\"row\">Select a payment method</h4>\n <div class=\"row\">\n <input id=\"radio1\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio2\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio3\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio4\" type=\"radio\">\n </div>\n </div>\n</div>\n\n<style>\n /* RadioButton Styles */\n .radio-control {\n margin-left: 40%;\n margin-top: 8%;\n }\n\n @media only screen and (max-width: 700px) {\n .radio-control {\n margin-left: 35%;\n margin-top: 8%;\n }\n\n .control-section {\n min-height: 200px;\n }\n }\n\n @media only screen and (max-width: 500px) {\n .radio-control {\n margin-top: 20%;\n margin-left: 21%;\n margin-bottom: 27%;\n }\n }\n\n .control-section .row {\n margin-top: 20px;\n }\n\n .radio-control h4 {\n color: rgba(0, 0, 0, 0.64);\n }\n\n .e-bigger .radio-control h4 {\n font-size: 20px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { RadioButton } from '@syncfusion/ej2-buttons';\n\n/**\n * Default RadioButton sample\n */\n\n //Checked State\n let radioButton: RadioButton = new RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});\n radioButton.appendTo('#radio1');\n\n radioButton = new RadioButton({label: 'Net Banking', name: 'payment', value: 'netbanking'});\n radioButton.appendTo('#radio2');\n\n radioButton = new RadioButton({label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery'});\n radioButton.appendTo('#radio3');\n\n radioButton = new RadioButton({label: 'Other Wallets', name: 'payment', value: 'others'});\n radioButton.appendTo('#radio4');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div class=\"radio-control\">\n <h4 class=\"row\">Select a payment method</h4>\n <div class=\"row\">\n <input id=\"radio1\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio2\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio3\" type=\"radio\">\n </div>\n <div class=\"row\">\n <input id=\"radio4\" type=\"radio\">\n </div>\n </div>\n</div>\n\n<style>\n /* RadioButton Styles */\n .radio-control {\n margin-left: 40%;\n margin-top: 8%;\n }\n\n @media only screen and (max-width: 700px) {\n .radio-control {\n margin-left: 35%;\n margin-top: 8%;\n }\n\n .control-section {\n min-height: 200px;\n }\n }\n\n @media only screen and (max-width: 500px) {\n .radio-control {\n margin-top: 20%;\n margin-left: 21%;\n margin-bottom: 27%;\n }\n }\n\n .control-section .row {\n margin-top: 20px;\n }\n\n .radio-control h4 {\n color: rgba(0, 0, 0, 0.64);\n }\n\n .e-bigger .radio-control h4 {\n font-size: 20px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n/**\n * Default calendar sample\n */\n\n\n let calendar: Calendar = new Calendar({\n change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args: ChangedEventArgs): void {\n (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n\n </div>\n </div>\n</div>\n\n<style>\n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n margin-left: 5px;\n }\n \n .control_wrapper {\n max-width: 300px;\n margin: 0 auto;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n/**\n * Default calendar sample\n */\n\n\n let calendar: Calendar = new Calendar({\n change: valueChange\n });\n calendar.appendTo('#calendar');\n function valueChange(args: ChangedEventArgs): void {\n (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n\n </div>\n </div>\n</div>\n\n<style>\n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n margin-left: 5px;\n }\n \n .control_wrapper {\n max-width: 300px;\n margin: 0 auto;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Calendar, RenderDayCellEventArgs, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n/**\n * Disabled calendar sample\n */\n\n\n let calendar: Calendar = new Calendar({\n renderDayCell: disableDate, change: valueChange\n });\n calendar.appendTo('#calendar');\n function disableDate(args: RenderDayCellEventArgs): void {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n function valueChange(args: ChangedEventArgs): void {\n (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n<style>\n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n margin-left: 5px;\n }\n \n .control_wrapper {\n max-width: 300px;\n margin: 0 auto;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Calendar, RenderDayCellEventArgs, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n/**\n * Disabled calendar sample\n */\n\n\n let calendar: Calendar = new Calendar({\n renderDayCell: disableDate, change: valueChange\n });\n calendar.appendTo('#calendar');\n function disableDate(args: RenderDayCellEventArgs): void {\n if (args.date.getDay() === 0 || args.date.getDay() === 6) {\n args.isDisabled = true;\n }\n }\n function valueChange(args: ChangedEventArgs): void {\n (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n<style>\n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n margin-left: 5px;\n }\n \n .control_wrapper {\n max-width: 300px;\n margin: 0 auto;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n\n/**\n * Range calendar sample\n */\n\n\n let calendar: Calendar = new Calendar({\n min: new Date('05/05/2017'),\n max: new Date('05/27/2017'), change: startDate\n });\n calendar.appendTo('#calendar');\n function startDate(args: ChangedEventArgs): void {\n (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n<style>\n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n margin-left: 5px;\n }\n \n .control_wrapper {\n max-width: 300px;\n margin: 0 auto;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport { Calendar, ChangedEventArgs } from '@syncfusion/ej2-calendars';\n\n/**\n * Range calendar sample\n */\n\n\n let calendar: Calendar = new Calendar({\n min: new Date('05/05/2017'),\n max: new Date('05/27/2017'), change: startDate\n });\n calendar.appendTo('#calendar');\n function startDate(args: ChangedEventArgs): void {\n (<HTMLInputElement>document.getElementById('date_label')).textContent = 'Selected Value: ' + args.value.toLocaleDateString();\n }\n\n\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control_wrapper\">\n <div id=\"container\">\n <div id=\"calendar\"></div><br>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n </div>\n</div>\n\n<style>\n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n margin-left: 5px;\n }\n \n .control_wrapper {\n max-width: 300px;\n margin: 0 auto;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates Accumulation Distribution indicator in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Accumulation Distribution Indicator. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use Accumulation Distribution Indicator, we need to Inject
|
||||
<code>AccumulationDistributionIndicator</code> module using <code>chart.Inject(AccumulationDistributionIndicator)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Accumulation Distribution Indicator can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import {
|
||||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, AccumulationDistributionIndicator, IAxisLabelRenderEventArgs,
|
||||
StripLine, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { chartData } from './financial-data';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
AccumulationDistributionIndicator
|
||||
);
|
||||
|
||||
/**
|
||||
* Accumulation Distribution
|
||||
*/
|
||||
this.default = (): void => {
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
// Initializing the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
intervalType: 'Months',
|
||||
majorGridLines: { width: 0 },
|
||||
zoomFactor: 0.2, zoomPosition: 0.6,
|
||||
skeleton: 'yMd',
|
||||
crosshairTooltip: { enable: true },
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
labelFormat: '${value}',
|
||||
minimum: 50, maximum: 170,
|
||||
plotOffset: 25,
|
||||
interval: 30, rowIndex: 1, opposedPosition: true, lineStyle: { width: 0 }
|
||||
},
|
||||
axes: [{
|
||||
name: 'secondary',
|
||||
opposedPosition: true, rowIndex: 0,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, minimum: -7000000000, maximum: 5000000000,
|
||||
interval: 6000000000, majorTickLines: { width: 0 }, title: 'Accumulation Distribution',
|
||||
stripLines: [
|
||||
{
|
||||
start: -7000000000, end: 6000000000, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
// Initializing the rows
|
||||
rows: [
|
||||
{
|
||||
height: '40%'
|
||||
}, {
|
||||
height: '60%'
|
||||
}
|
||||
],
|
||||
// Initializing the series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: true }
|
||||
}],
|
||||
// Initializing the indicators
|
||||
indicators: [{
|
||||
type: 'AccumulationDistribution', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
|
||||
period: 3, animation: { enable: true }
|
||||
}],
|
||||
/**
|
||||
* Initializing the zooming, crosshair and tooltip
|
||||
*/
|
||||
zoomSettings:
|
||||
{
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableSelectionZooming: true,
|
||||
mode: 'X'
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
},
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
// Triggered label render to convert a billion
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
if (args.axis.name === 'secondary') {
|
||||
let value: number = Number(args.text) / 1000000000;
|
||||
args.text = String(value) + 'bn';
|
||||
}
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
title: 'AAPL 2012-2017',
|
||||
width: Browser.isDevice ? '100%' : '80%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,30 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates area series with empty points.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render a area series with empty points. Similar to line type series, but the area get closed and filled with series color.
|
||||
You can use <code>border</code>, <code>fill</code> properties to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its value.
|
||||
Legend is enabled in this example with series type shape.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use area series, we need to inject
|
||||
<code>AreaSeries</code> module using <code>Chart.Inject(AreaSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the area series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import { Chart, Category, AreaSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(AreaSeries, Category, Legend);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Area Series with Empty Point
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary Axes
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
interval: 2,
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Rates',
|
||||
|
||||
majorGridLines: { width: 0 },
|
||||
labelFormat: '{value}M'
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Area',
|
||||
dataSource: [{ x: '2002', y: 2 }, { x: '2003', y: 1.7 }, { x: '2004', y: 1.8 }, { x: '2005', y: 2.1 },
|
||||
{ x: '2006', y: 2.3 }, { x: '2007', y: 1.7 }, { x: '2008', y: 1.5 }, { x: '2009', y: 1.8 },
|
||||
{ x: '2010', y: 2 }, { x: 2011, y: 3.1 }],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'France',
|
||||
opacity: 0.8
|
||||
}, {
|
||||
type: 'Area',
|
||||
dataSource: [{ x: '2002', y: 2.2 }, { x: '2003', y: 3.4 }, { x: '2004', y: 2.8 }, { x: '2005', y: null },
|
||||
{ x: '2006', y: null }, { x: '2007', y: 2.5 }, { x: '2008', y: 2.9 }, { x: '2009', y: 3.8 },
|
||||
{ x: '2010', y: 1.4 }, { x: 2011, y: 3.1 }],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'US',
|
||||
opacity: 0.8,
|
||||
},
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Inflation Rate',
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,5 +1,10 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates area series type in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Chart, DateTime, AreaSeries, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Chart, DateTime, AreaSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(AreaSeries, DateTime, Legend);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Area Series
|
||||
|
|
@ -9,12 +10,9 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
title: 'Years',
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'y',
|
||||
lineStyle: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
intervalType: 'Years',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
},
|
||||
|
|
@ -26,11 +24,14 @@ this.default = (): void => {
|
|||
minimum: 2,
|
||||
maximum: 5,
|
||||
interval: 1,
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
majorGridLines: { width: 0 },
|
||||
labelFormat: '{value}M'
|
||||
},
|
||||
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
|
|
@ -40,7 +41,6 @@ this.default = (): void => {
|
|||
{ x: new Date(2004, 0, 1), y: 3.2 }, { x: new Date(2005, 0, 1), y: 3.9 }],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Product A',
|
||||
border: { color: 'transparent' },
|
||||
opacity: 0.5,
|
||||
},
|
||||
{
|
||||
|
|
@ -50,26 +50,16 @@ this.default = (): void => {
|
|||
{ x: new Date(2004, 0, 1), y: 3.6 }, { x: new Date(2005, 0, 1), y: 3 }],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Product B',
|
||||
opacity: 0.5,
|
||||
border: { color: 'transparent' },
|
||||
},
|
||||
{
|
||||
type: 'Area',
|
||||
dataSource: [{ x: new Date(2000, 0, 1), y: 2.8 }, { x: new Date(2001, 0, 1), y: 2.5 },
|
||||
{ x: new Date(2002, 0, 1), y: 2.8 }, { x: new Date(2003, 0, 1), y: 3.2 },
|
||||
{ x: new Date(2004, 0, 1), y: 2.9 }, { x: new Date(2005, 0, 1), y: 2 }],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Product C',
|
||||
opacity: 0.5,
|
||||
border: { color: 'transparent' },
|
||||
|
||||
opacity: 0.5
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Average Sales Comparison',
|
||||
width : Browser.isDevice ? '100%' : '60%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates Average True Range indicator in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Average True Range Indicator. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use Average True Range Indicator, we need to Inject
|
||||
<code>AtrIndicator</code> module using <code>chart.Inject(AtrIndicator)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Average True Range Indicator can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import {
|
||||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, AtrIndicator, StripLine, ChartTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, StripLine, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
AtrIndicator
|
||||
);
|
||||
|
||||
/**
|
||||
* Average True Range Indicator
|
||||
*/
|
||||
this.default = (): void => {
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
// Initiazlizing the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
intervalType: 'Months',
|
||||
majorGridLines: { width: 0 },
|
||||
skeleton: 'yMd',
|
||||
zoomFactor: 0.2, zoomPosition: 0.6,
|
||||
crosshairTooltip: { enable: true },
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
labelFormat: '${value}',
|
||||
minimum: 50, maximum: 170,
|
||||
interval: 30, rowIndex: 1,
|
||||
plotOffset: 25,
|
||||
majorGridLines: { width: 1 }, opposedPosition: true, lineStyle: { width: 0 }
|
||||
},
|
||||
axes: [{
|
||||
name: 'secondary',
|
||||
opposedPosition: true, rowIndex: 0,
|
||||
majorGridLines: { width: 0 }, lineStyle: { width: 0 }, majorTickLines: { width: 0 },
|
||||
maximum: 14, minimum: 0, interval: 7, title: 'ATR',
|
||||
stripLines: [
|
||||
{
|
||||
start: 0, end: 14, text: '', color: '#6063ff', visible: true,
|
||||
opacity: 0.1, zIndex: 'Behind'
|
||||
}]
|
||||
}],
|
||||
// Initializing the rows
|
||||
rows: [
|
||||
{
|
||||
height: '40%'
|
||||
}, {
|
||||
height: '60%'
|
||||
}
|
||||
],
|
||||
// Initializing the chart series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: true }
|
||||
}],
|
||||
// Initializing the indicators
|
||||
indicators: [{
|
||||
type: 'Atr', field: 'Close', seriesName: 'Apple Inc', yAxisName: 'secondary', fill: '#6063ff',
|
||||
period: 3, animation: { enable: true }
|
||||
}],
|
||||
/**
|
||||
* User interaction initialized zooming, tooltip and crosshair
|
||||
*/
|
||||
zoomSettings:
|
||||
{
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableSelectionZooming: true,
|
||||
mode: 'X'
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
},
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
chartArea: { border: { width: 0 } },
|
||||
title: 'AAPL 2012-2017',
|
||||
width: Browser.isDevice ? '100%' : '80%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,9 +1,14 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="https://www.gov.uk/" target='_blank'>www.gov.uk</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates bar series type in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the bar type charts. Similar to column charts, but the orientation of y axis is horizontal instead of vertical.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Chart, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(BarSeries, Category, Legend, Tooltip);
|
||||
import { Chart, DataLabel, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(BarSeries, DataLabel, Category, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
* Bar Series
|
||||
|
|
@ -7,59 +8,79 @@ Chart.Inject(BarSeries, Category, Legend, Tooltip);
|
|||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
title: 'Food',
|
||||
interval: 1
|
||||
interval: 1,
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'In Billions',
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
maximum: 3.2,
|
||||
labelFormat: '{value}B',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
edgeLabelPlacement: 'Shift',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Bar',
|
||||
dataSource: [
|
||||
{ x: 'Fruit', y: 9.1 }, { x: 'Meat', y: 5.8 },
|
||||
{ x: 'Cereals', y: 3.2 },
|
||||
{ x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },
|
||||
{ x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 },
|
||||
{ x: 'Feed', y: 2.9 }, { x: 'Oils', y: 1.7 },
|
||||
{ x: 'Sugar', y: 1.3 }
|
||||
{ x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Imports',
|
||||
yName: 'y', name: 'Imports', marker: {
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Top',
|
||||
font: {
|
||||
fontWeight: '600', color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Bar',
|
||||
dataSource: [
|
||||
{ x: 'Fruit', y: 0.9 }, { x: 'Meat', y: 1.5 },
|
||||
{ x: 'Cereals', y: 2.1 },
|
||||
{ x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },
|
||||
{ x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 },
|
||||
{ x: 'Feed', y: 0.9 }, { x: 'Oils', y: 0.7 },
|
||||
{ x: 'Sugar', y: 0.4 }
|
||||
{ x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Exports',
|
||||
yName: 'y', name: 'Exports', marker: {
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Top',
|
||||
font: {
|
||||
fontWeight: '600', color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
// Initializing the tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
//Initializing Chart title
|
||||
title: 'UK Trade in Food Groups - 2015',
|
||||
tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates bollinger indicator in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the BollingerBands type Indicator. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use BollingerBands Indicator, we need to Inject
|
||||
<code>BollingerBands</code> module using <code>chart.Inject(BollingerBands)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the BollingerIndicator can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import {
|
||||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic,
|
||||
Crosshair, LineSeries, BollingerBands, ChartTheme, RangeAreaSeries
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries, RangeAreaSeries,
|
||||
BollingerBands
|
||||
);
|
||||
|
||||
/**
|
||||
* Indicator - Bollinger Band
|
||||
*/
|
||||
this.default = (): void => {
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
// Initializing the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
intervalType: 'Months',
|
||||
majorGridLines: { width: 0 },
|
||||
zoomFactor: 0.6, zoomPosition: 0.6,
|
||||
skeleton: 'yMd',
|
||||
crosshairTooltip: { enable: true }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
labelFormat: '${value}M',
|
||||
minimum: 50, maximum: 170, interval: 30,
|
||||
majorGridLines: { width: 1 },
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
// Initializing the chart series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: false }
|
||||
}],
|
||||
// Initializing the indicators
|
||||
indicators: [{
|
||||
type: 'BollingerBands', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
|
||||
period: 14, animation: { enable: true }, upperLine: { color: '#ffb735', width: 1 }, lowerLine: { color: '#f2ec2f', width: 1 }
|
||||
}],
|
||||
/**
|
||||
* Initializing the user interaction features like, tooltip, crosshair and zooming
|
||||
*/
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
},
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
zoomSettings: {
|
||||
enableMouseWheelZooming: true,
|
||||
enableSelectionZooming: true,
|
||||
enableDeferredZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'X'
|
||||
},
|
||||
width : Browser.isDevice ? '100%' : '80%',
|
||||
title: 'AAPL - 2012-2017',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
legendSettings: { visible: false }
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,62 @@
|
|||
<div>
|
||||
<div class="col-lg-9 control-section">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 50%">
|
||||
<div>Mode:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<select id="mode">
|
||||
<option value='Normal'>Normal</option>
|
||||
<option value='Exclusive'>Exclusive</option>
|
||||
<option value='Inclusive'>Inclusive</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 50%">
|
||||
<div>Mean: </div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<input type="checkbox" id="mean" checked>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates box and whisker series for a employee's age group for various departments in a country. Mode of box and whisker series can be changed by <code>Mode</code> in property panel. To display the mean value in a series enable the <code>Mean</code> in the property panel.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the box and whisker type charts. Similar to line type series, but
|
||||
the area get closed and filled with series color. You can use <code>border</code>, <code>fill</code> properties
|
||||
to customize the area. <code>marker</code> and <code>dataLabel</code> are used to represent individual data and its
|
||||
value. Legend is enabled in this example with series type shape.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use box and whisker series, we need to inject
|
||||
<code>BoxAndWhiskerSeries</code> module using <code>Chart.Inject(BoxAndWhiskerSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on this series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import {
|
||||
ChartTheme, Chart, getSaturationColor, Category, ILoadedEventArgs,
|
||||
IPointRenderEventArgs, BoxAndWhiskerSeries, Tooltip, getElement, BoxPlotMode
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(Category, BoxAndWhiskerSeries, Tooltip);
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Box and Whisker Series
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
|
||||
'#ea7a57', '#404041', '#00bdae'];
|
||||
let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
|
||||
'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
|
||||
let bootstrapColors: string[] = ['#a16ee5', '#f7ce69', '#55a5c2', '#7ddf1e', '#ff6ea6',
|
||||
'#7953ac', '#b99b4f', '#407c92', '#5ea716', '#b91c52'];
|
||||
let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[args.point.index % 10];
|
||||
} else {
|
||||
args.fill = bootstrapColors[args.point.index % 10];
|
||||
}
|
||||
args.border.color = getSaturationColor(args.fill, -0.6);
|
||||
};
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category',
|
||||
majorGridLines: { width: 0 },
|
||||
edgeLabelPlacement: 'Shift',
|
||||
labelIntersectAction: 'Trim'
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
minimum: 10, maximum: 60,
|
||||
interval: 10, title: 'Age',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }
|
||||
},
|
||||
pointRender: labelRender,
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'BoxAndWhisker',
|
||||
dataSource: [
|
||||
{ x: 'Development', y: [22, 22, 23, 25, 25, 25, 26, 27, 27, 28, 28, 29, 30, 32, 34, 32, 34, 36, 35, 38] },
|
||||
{ x: 'Testing', y: [22, 33, 23, 25, 26, 28, 29, 30, 34, 33, 32, 31, 50] },
|
||||
{ x: 'HR', y: [22, 24, 25, 30, 32, 34, 36, 38, 39, 41, 35, 36, 40, 56] },
|
||||
{ x: 'Finance', y: [26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45] },
|
||||
{ x: 'R&D', y: [26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58] },
|
||||
{ x: 'Sales', y: [27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53] },
|
||||
{ x: 'Inventory', y: [21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38] },
|
||||
{ x: 'Graphics', y: [26, 28, 29, 30, 32, 33, 35, 36, 52] },
|
||||
{ x: 'Training', y: [28, 29, 30, 31, 32, 34, 35, 36] }
|
||||
],
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
},
|
||||
name: 'Department'
|
||||
}
|
||||
],
|
||||
// Initializing the tooltip
|
||||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
//Initializing Chart title
|
||||
title: 'Employee Age Group in Various Department',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
||||
let mode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].boxPlotMode = <BoxPlotMode>mode.value;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
mode.appendTo('#mode');
|
||||
document.getElementById('mean').onchange = () => {
|
||||
let element: HTMLInputElement = <HTMLInputElement>getElement('mean');
|
||||
chart.series[0].showMean = element.checked;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
};
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,7 +1,10 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top: -5px">
|
||||
</div>
|
||||
<div id="container" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates bubble series for comparision of GDP and literacy rate for different countries.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { fabricColors, bootstrapColors, materialColors } from './theme-color';
|
||||
Chart.Inject(BubbleSeries, Tooltip);
|
||||
|
||||
let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
|
||||
'#ea7a57', '#404041', '#00bdae' ];
|
||||
let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
|
||||
'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
|
||||
let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index];
|
||||
args.fill = fabricColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[args.point.index % 10];
|
||||
} else {
|
||||
args.fill = materialColors[args.point.index];
|
||||
args.fill = bootstrapColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -20,48 +21,58 @@ let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs)
|
|||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
// Initializing the Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
title: 'Literacy Rate',
|
||||
minimum: 60,
|
||||
maximum: 100,
|
||||
interval: 5
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis: {
|
||||
title: 'GDP growth rate',
|
||||
minimum: -2,
|
||||
maximum: 16,
|
||||
interval: 2
|
||||
title: 'GDP Growth Rate',
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
interval: 2.5
|
||||
},
|
||||
|
||||
//Initializing Chart Series
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
// Initializing the chart series
|
||||
series: [
|
||||
{
|
||||
type: 'Bubble',
|
||||
dataSource: [{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
|
||||
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
|
||||
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
|
||||
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
|
||||
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
|
||||
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
|
||||
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
|
||||
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
|
||||
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
|
||||
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
|
||||
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
|
||||
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }],
|
||||
xName: 'x', yName: 'y', size: 'size', name: 'pound',
|
||||
dataSource: [
|
||||
{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
|
||||
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
|
||||
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
|
||||
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
|
||||
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
|
||||
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
|
||||
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
|
||||
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
|
||||
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
|
||||
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
|
||||
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
|
||||
{ x: 61.3, y: 1.45, size: 0.162, text: 'Nigeria' },
|
||||
{ x: 82.2, y: 3.97, size: 0.7, text: 'Hong Kong' },
|
||||
{ x: 79.2, y: 3.9, size: 0.162, text: 'Netherland' },
|
||||
{ x: 72.5, y: 4.5, size: 0.7, text: 'Jordan' },
|
||||
{ x: 81, y: 3.5, size: 0.21, text: 'Australia' },
|
||||
{ x: 66.8, y: 3.9, size: 0.028, text: 'Mongolia' },
|
||||
{ x: 78.4, y: 2.9, size: 0.231, text: 'Taiwan' }
|
||||
],
|
||||
minRadius: 3,
|
||||
maxRadius: Browser.isDevice ? 6 : 8,
|
||||
xName: 'x', yName: 'y', size: 'size', name: 'Pound',
|
||||
marker: { dataLabel: { name: 'text' } }
|
||||
},
|
||||
],
|
||||
pointRender: labelRender,
|
||||
// Initiazlize the point render event
|
||||
pointRender: pointRender,
|
||||
title: 'World Countries Details',
|
||||
// Initializing the tooltip with format
|
||||
tooltip: {
|
||||
enable: true,
|
||||
format: '${point.text}<br>Literacy Rate:${point.x}%<br>GDP Annual Growth Rate:${point.y}<br>Population: ${point.size} Billion'
|
||||
format: '${point.text}<br/>Literacy Rate : <b>${point.x}%</b>' +
|
||||
'<br/>GDP Annual Growth Rate : <b>${point.y}</b><br/>Population : <b>${point.size} Billion</b>'
|
||||
},
|
||||
legendSettings: { visible: false }
|
||||
});
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates candle series type in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the Candle type series. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use Candle series, we need to Inject
|
||||
<code>CandleSeries</code> module using <code>chart.Inject(CandleSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the Candle series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import {
|
||||
ChartTheme, Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ColumnSeries,
|
||||
Crosshair, StripLine, IAxisLabelRenderEventArgs, ITooltipRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(CandleSeries, StripLine, Category, Tooltip, DateTime, Zoom, ColumnSeries, Logarithmic, Crosshair);
|
||||
|
||||
/**
|
||||
* Candle series
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let getLabelText: Function = (value: number): string => {
|
||||
return (((value) / 1000000000)).toFixed(1) + 'bn';
|
||||
};
|
||||
let chart: Chart = new Chart({
|
||||
// Initialize the axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
skeleton: 'yMd', zoomFactor: 0.2, zoomPosition: 0.6,
|
||||
crosshairTooltip: { enable: true },
|
||||
majorGridLines: { width: 0 },
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Volume',
|
||||
labelFormat: '{value}',
|
||||
valueType: 'Logarithmic',
|
||||
minimum: 500000000, maximum: 130000000, opposedPosition: true,
|
||||
majorGridLines: { width: 1 },
|
||||
lineStyle: { width: 0 },
|
||||
stripLines: [
|
||||
{
|
||||
end: 1300000000, startFromAxis: true, text: '', color: 'black', visible: true,
|
||||
opacity: 0.03, zIndex: 'Behind'
|
||||
}]
|
||||
},
|
||||
axes: [{
|
||||
name: 'secondary', minimum: 50, maximum: 180, interval: 40, opposedPosition: true, rowIndex: 1, majorGridLines: { width: 1 },
|
||||
labelFormat: '${value}', title: 'Price', plotOffset: 30, lineStyle: { width: 0 }
|
||||
}],
|
||||
// Initialize the chart rows
|
||||
rows: [
|
||||
{
|
||||
height: '30%'
|
||||
}, {
|
||||
height: '70%'
|
||||
}
|
||||
],
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: chartData, animation: { enable: true }, xName: 'x', yName: 'volume',
|
||||
name: 'Volume'
|
||||
},
|
||||
{
|
||||
type: 'Candle', yAxisName: 'secondary', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
dataSource: chartData, animation: { enable: true },
|
||||
xName: 'x', low: 'low', high: 'high', open: 'open', close: 'close', name: 'Apple Inc',
|
||||
volume: 'volume'
|
||||
}
|
||||
],
|
||||
/**
|
||||
* Initialize the user interactions zooming, tooltip and crosshair
|
||||
*/
|
||||
zoomSettings:
|
||||
{
|
||||
enableMouseWheelZooming: true,
|
||||
enablePinchZooming: true,
|
||||
enableSelectionZooming: true,
|
||||
mode: 'X'
|
||||
},
|
||||
title: 'AAPL Historical',
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
},
|
||||
/**
|
||||
* Triggered tooltip, load and axis label render event
|
||||
*/
|
||||
tooltipRender: (args: ITooltipRenderEventArgs) => {
|
||||
if (!args.series.index) {
|
||||
args.textCollections = 'Volume : <b>' +
|
||||
getLabelText(args.textCollections.split('<b>')[1].split('</b>')[0]) + '</b>';
|
||||
}
|
||||
},
|
||||
axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
|
||||
if (args.axis.name === 'primaryYAxis') {
|
||||
args.text = getLabelText(+args.text);
|
||||
}
|
||||
},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '80%',
|
||||
chartArea: { border: { width: 0 } },
|
||||
crosshair: { enable: true, lineType: 'Vertical' }
|
||||
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,9 +1,14 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="http://www.internetworldstats.com/top20.htm" target="_blank">www.internetworldstats.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates rendering of category axis for a chart by using internet users of different country.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Category axis is used to represent the categories in data. To render category axis, set <code>valueType</code> in axis to <code>Category</code>.
|
||||
|
|
|
|||
|
|
@ -1,64 +1,89 @@
|
|||
import { Chart, BarSeries, Category, Legend, Tooltip, IPointRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
import {
|
||||
Chart, BarSeries, DataLabel, Category,
|
||||
Tooltip, IPointRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(BarSeries, Category, Legend, Tooltip);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
import { fabricColors, materialColors, bootstrapColors } from './theme-color';
|
||||
Chart.Inject(BarSeries, Category, Tooltip, DataLabel);
|
||||
|
||||
/**
|
||||
* Category Axis
|
||||
*/
|
||||
let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
|
||||
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
|
||||
let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
|
||||
'#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];
|
||||
let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index];
|
||||
} else {
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[args.point.index];
|
||||
} else {
|
||||
args.fill = bootstrapColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
//Initializing Primary X and YAxis
|
||||
primaryXAxis: {
|
||||
title: 'Country',
|
||||
valueType: 'Category'
|
||||
valueType: 'Category',
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Users in Millions',
|
||||
minimum: 0,
|
||||
maximum: 800,
|
||||
labelFormat: '{value}M',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
labelFormat: Browser.isDevice ? '{value}' : '{value}M',
|
||||
edgeLabelPlacement: 'Shift',
|
||||
majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
labelStyle: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Bar',
|
||||
dataSource: [
|
||||
{ x: 'GER', y: 71.7 },
|
||||
{ x: 'GER', y: 72 },
|
||||
{ x: 'RUS', y: 103.1 },
|
||||
{ x: 'BRZ', y: 139.1 },
|
||||
{ x: 'IND', y: 462.1 },
|
||||
{ x: 'CHN', y: 721.4 },
|
||||
{ x: 'USA', y: 286.9 },
|
||||
{ x: 'GBR', y: 60.2 },
|
||||
{ x: 'JPN', y: 115.1 },
|
||||
{ x: 'GBR', y: 115.1 },
|
||||
{ x: 'NGR', y: 97.2 },
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y',
|
||||
yName: 'y', marker: {
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Top', font: {
|
||||
fontWeight: '600',
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
name: 'Users'
|
||||
}
|
||||
],
|
||||
pointRender: labelRender,
|
||||
//Initializing Chart title
|
||||
title: 'Internet Users – 2016',
|
||||
tooltip: { enable: true, format: '${point.x} : ${point.y}' }
|
||||
title: Browser.isDevice ? 'Internet Users in Million – 2016' : 'Internet Users – 2016',
|
||||
tooltip: { enable: true },
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,34 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates column type series with side by side placement.
|
||||
</p>
|
||||
</div
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
|
||||
the frequency, count, total or average of data in different categories. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the vertical rect. <code>dataLabel</code> is used to represent individual
|
||||
data and its value.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
|
||||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { ChartTheme, Chart, ColumnSeries, Category, DataLabel, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Column Series with SBS Placement
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
|
||||
},
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis:
|
||||
{
|
||||
minimum: 0, maximum: 12, interval: 3, majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
|
||||
},
|
||||
enableSideBySidePlacement: false,
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Total',
|
||||
dataSource: [{ x: 'Jamesh', y: 10, text: 'Total 10' },
|
||||
{ x: 'Michael', y: 9, text: 'Total 9' }, { x: 'John', y: 11, text: 'Total 11' }],
|
||||
columnWidth: 0.5,
|
||||
marker: { dataLabel: { visible: true, name: 'text', position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Apple',
|
||||
dataSource: [{ x: 'Jamesh', y: 5 }, { x: 'Michael', y: 4 }, { x: 'John', y: 5 }],
|
||||
columnWidth: 0.4,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
}, {
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Orange',
|
||||
dataSource: [{ x: 'Jamesh', y: 4 }, { x: 'Michael', y: 3 }, { x: 'John', y: 4 }],
|
||||
columnWidth: 0.3,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Grapes',
|
||||
dataSource: [{ x: 'Jamesh', y: 1 }, { x: 'Michael', y: 2 }, { x: 'John', y: 2 }],
|
||||
columnWidth: 0.2,
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
}
|
||||
],
|
||||
// Initialize the chart title
|
||||
title: 'Fruit Consumption', tooltip: { enable: true, shared: true },
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,24 +1,31 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates column series type in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing the frequency, count, total or average of data in different categories.
|
||||
You can use <code>border</code>, <code>fill</code> properties to customize the vertical rect. <code>dataLabel</code> is used to represent individual data and its value.
|
||||
In this example, you can see how to render and configure the column type charts. Column type charts are used for comparing
|
||||
the frequency, count, total or average of data in different categories. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the vertical rect. <code>dataLabel</code> is used to represent individual
|
||||
data and its value.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
|
||||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use column series, we need to inject
|
||||
<code>ColumnSeries</code> module using <code>Chart.Inject(ColumnSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the column series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
|
|
|
|||
|
|
@ -1,65 +1,47 @@
|
|||
import { Chart, ColumnSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Tooltip);
|
||||
import { ChartTheme, Chart, ColumnSeries, Category, Legend, DataLabel, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, DataLabel, Category, Legend, Tooltip);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Column Series
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
title: 'Countries',
|
||||
valueType: 'Category',
|
||||
interval: 1
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
chartArea: { border: { width: 0 } },
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Medals',
|
||||
minimum: 0,
|
||||
maximum: 50,
|
||||
interval: 5
|
||||
minimum: 0, maximum: 50, interval: 10, majorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
|
||||
},
|
||||
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }, { x: 'RUS', y: 19 },
|
||||
{ x: 'GER', y: 17 }, { x: 'JAP', y: 12 }, { x: 'FRA', y: 10 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Gold',
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Gold',
|
||||
dataSource: [{ x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }],
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }, { x: 'RUS', y: 17 },
|
||||
{ x: 'GER', y: 10 }, { x: 'JAP', y: 8 }, { x: 'FRA', y: 18 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Silver',
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Silver',
|
||||
dataSource: [{ x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }],
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
},
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }, { x: 'RUS', y: 19 },
|
||||
{ x: 'GER', y: 15 }, { x: 'JAP', y: 21 }, { x: 'FRA', y: 14 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Bronze',
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Bronze',
|
||||
dataSource: [{ x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }],
|
||||
marker: { dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Chart title
|
||||
title: 'Olympic Medals - RIO',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' },
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
title: 'Olympic Medal Counts - RIO', tooltip: { enable: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,10 +1,15 @@
|
|||
|
||||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="http://perspectives.pictet.com/2016/01/29/growth-accelerated-markedly-in-france-and-spain-in-2015/" target="_blank">perspectives.pictet.com</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates combination series of stacked column and line series for annual GDP growth of France.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the different type of charts. You can render any combination of series in chart except bar.
|
||||
|
|
|
|||
|
|
@ -1,104 +1,108 @@
|
|||
import { Chart, StackingColumnSeries, LineSeries, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Marker, ColumnSeries, Category } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingColumnSeries, LineSeries, Category, Marker, ColumnSeries, Legend, Tooltip);
|
||||
import { ChartTheme, Chart, StackingColumnSeries, LineSeries, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(StackingColumnSeries, LineSeries, Category, ColumnSeries, Tooltip, Legend);
|
||||
|
||||
/**
|
||||
* Combination Series
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
title: 'Years',
|
||||
interval: 1,
|
||||
interval: Browser.isDevice ? 2 : 1,
|
||||
labelIntersectAction: 'Rotate45',
|
||||
valueType: 'Category'
|
||||
valueType: 'Category',
|
||||
majorGridLines: { width: 0 }, minorGridLines: { width: 0 },
|
||||
majorTickLines: { width: 0 }, minorTickLines: { width: 0 },
|
||||
lineStyle: { width: 0 },
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Growth',
|
||||
minimum: -3,
|
||||
maximum: 3,
|
||||
interval: 1
|
||||
interval: 1,
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 }, majorGridLines: { width: 1 },
|
||||
minorGridLines: { width: 1 }, minorTickLines: { width: 0 },
|
||||
labelFormat: '{value}B',
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 1.2 }, { x: '2006', y: 1 },
|
||||
{ x: '2007', y: 1 }, { x: '2008', y: 0.25 },
|
||||
{ x: '2009', y: 0.1 }, { x: '2010', y: 1 },
|
||||
{ x: '2011', y: 0.1 }, { x: '2012', y: -0.25 },
|
||||
{ x: '2013', y: 0.25 }, { x: '2014', y: 0.6 },
|
||||
{ x: '2015', y: 0.9 }
|
||||
{ x: '2013', y: 0.25 }, { x: '2014', y: 0.6 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Private Consumption',
|
||||
}, {
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 0.5 }, { x: '2006', y: 0.5 },
|
||||
{ x: '2007', y: 0.5 }, { x: '2008', y: 0.35 },
|
||||
{ x: '2009', y: 0.9 }, { x: '2010', y: 0.5 },
|
||||
{ x: '2011', y: 0.25 }, { x: '2012', y: -0.5 },
|
||||
{ x: '2013', y: 0.5 }, { x: '2014', y: 0.6 },
|
||||
{ x: '2015', y: 0.5 }
|
||||
{ x: '2013', y: 0.5 }, { x: '2014', y: 0.6 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Government Consumption',
|
||||
}, {
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 0.7 }, { x: '2006', y: 1.4 },
|
||||
{ x: '2007', y: 1.5 }, { x: '2008', y: 0.35 },
|
||||
{ x: '2009', y: -2.7 }, { x: '2010', y: 0.5 },
|
||||
{ x: '2011', y: 0.25 }, { x: '2012', y: -0.1 },
|
||||
{ x: '2013', y: -0.3 }, { x: '2014', y: -0.6 },
|
||||
{ x: '2015', y: 0 }
|
||||
{ x: '2013', y: -0.3 }, { x: '2014', y: -0.6 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Investment',
|
||||
}, {
|
||||
type: 'StackingColumn',
|
||||
dataSource: [
|
||||
{ x: '2005', y: -0.8 }, { x: '2006', y: 0 },
|
||||
{ x: '2007', y: -1 }, { x: '2008', y: -.35 },
|
||||
{ x: '2009', y: -0.3 }, { x: '2010', y: -0.5 },
|
||||
{ x: '2011', y: 0 }, { x: '2012', y: -0.4 },
|
||||
{ x: '2013', y: 0 }, { x: '2014', y: -0.6 },
|
||||
{ x: '2015', y: -0.3 }
|
||||
{ x: '2013', y: 0 }, { x: '2014', y: -0.6 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'Net Foreign Trade',
|
||||
|
||||
xName: 'x', yName: 'y', name: 'Net Foreign Trade'
|
||||
}, {
|
||||
type: 'Line',
|
||||
dataSource: [
|
||||
{ x: '2005', y: 1.5 }, { x: '2006', y: 2.3 },
|
||||
{ x: '2007', y: 2 }, { x: '2008', y: 0.1 },
|
||||
{ x: '2009', y: -2.7 }, { x: '2010', y: 1.8 },
|
||||
{ x: '2011', y: 2 }, { x: '2012', y: 0.4 },
|
||||
{ x: '2013', y: 0.9 }, { x: '2014', y: 0.4 },
|
||||
{ x: '2015', y: 1.3 }
|
||||
{ x: '2013', y: 0.9 }, { x: '2014', y: 0.4 }
|
||||
],
|
||||
xName: 'x', yName: 'y', name: 'GDP',
|
||||
width: 2, opacity: 0.6,
|
||||
width: 2,
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10, opacity: 0.6,
|
||||
width: 10,
|
||||
height: 10
|
||||
},
|
||||
}
|
||||
],
|
||||
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
//Initializing Chart title
|
||||
title: 'Annual Growth GDP in France',
|
||||
legendSettings: { visible: false },
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' },
|
||||
// Enable Legend
|
||||
legendSettings: {
|
||||
visible: true
|
||||
},
|
||||
tooltip: {
|
||||
enable: true
|
||||
},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,12 @@
|
|||
<div class="control-section">
|
||||
<div id="container" style="width:92%"></div>
|
||||
<div id="container" align='center' style="width:92%"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates crosshair feature in chart. To see crosshair, hover or touch this chart and you can see instantaneous values of where you hovered.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p>This sample demonstrates the crosshair behavior in chart. Crosshair is used to inspect or focus on an individual data point.
|
||||
You can customize the axis tooltip using <code>crosshairTooltip</code> properties in axis.
|
||||
|
|
|
|||
|
|
@ -1,48 +1,26 @@
|
|||
import { Chart, LineSeries, Crosshair, DateTime, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Crosshair, Legend);
|
||||
import { ChartTheme, Chart, LineSeries, HiloOpenCloseSeries, Crosshair, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Crosshair, HiloOpenCloseSeries);
|
||||
import { axesData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Crosshair
|
||||
*/
|
||||
|
||||
let series1: Object[] = [];
|
||||
let series2: Object[] = [];
|
||||
let point1: Object;
|
||||
let point2: Object;
|
||||
let value: number = 60;
|
||||
let value1: number = 50;
|
||||
let i: number;
|
||||
for (i = 1; i < 250; i++) {
|
||||
|
||||
if (Math.random() > .5) {
|
||||
value += Math.random();
|
||||
value1 += Math.random();
|
||||
} else {
|
||||
value -= Math.random();
|
||||
value1 -= Math.random();
|
||||
}
|
||||
point1 = { x: new Date(2000, i, 1), y: value };
|
||||
point2 = { x: new Date(2000, i, 1), y: value1 };
|
||||
series1.push(point1);
|
||||
series2.push(point2);
|
||||
}
|
||||
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
//Initializing Chart Axes
|
||||
primaryXAxis: {
|
||||
majorGridLines: { width: 0 },
|
||||
valueType: 'DateTime',
|
||||
crosshairTooltip: { enable: true },
|
||||
labelFormat: 'yMMM'
|
||||
labelFormat: 'MMM'
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
minimum: 10, maximum: 90, interval: 10,
|
||||
title: 'Temperature (°F)',
|
||||
minimum: 83, maximum: 87, interval: 1,
|
||||
title: 'Millions in USD',
|
||||
labelFormat: '{value}M',
|
||||
rowIndex: 0,
|
||||
crosshairTooltip: {
|
||||
enable: true
|
||||
|
|
@ -53,37 +31,46 @@ this.default = (): void => {
|
|||
majorGridLines: { width: 0 },
|
||||
rowIndex: 0,
|
||||
opposedPosition: true,
|
||||
minimum: 0, maximum: 160, interval: 20,
|
||||
minimum: 82, maximum: 88, interval: 2,
|
||||
name: 'yAxis',
|
||||
title: 'Rainfall (MM)',
|
||||
title: 'Millions in USD (Stock)',
|
||||
crosshairTooltip: { enable: true }
|
||||
}
|
||||
],
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: series1,
|
||||
dataSource: axesData,
|
||||
border: { width: 1.5 },
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Temperature',
|
||||
xName: 'xDate', width: 2,
|
||||
yName: 'High',
|
||||
marker: {
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: series2,
|
||||
name: 'Rainfall',
|
||||
type: 'HiloOpenClose',
|
||||
dataSource: axesData,
|
||||
yAxisName: 'yAxis',
|
||||
border: { width: 1.5 },
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y',
|
||||
bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
xName: 'xDate', width: 2,
|
||||
high: 'High', low: 'Low', open: 'Open', close: 'Close'
|
||||
}
|
||||
],
|
||||
/**
|
||||
* Initialize the crosshair
|
||||
*/
|
||||
crosshair: { enable: true },
|
||||
legendSettings: { visible: true },
|
||||
legendSettings: { visible: false },
|
||||
width: Browser.isDevice ? '100%' : '80%',
|
||||
//Initializing Chart title
|
||||
title: 'Weather Condition',
|
||||
title: 'Conns,Inc Stock Details',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,74 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align='center'></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates line type series with dash-array support.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the line type charts. Line type charts are used to represent time-dependent
|
||||
data, showing trends in data at equal intervals. You can use
|
||||
<code>dashArray</code>,
|
||||
<code>width</code>,
|
||||
<code>fill</code> properties to customize the line.
|
||||
<code>marker</code> and
|
||||
<code>dataLabel</code> are used to represent individual data and its value.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use line series, we need to inject
|
||||
<code>LineSeries</code> module using
|
||||
<code>Chart.Inject(LineSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the line series can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
#container_Series_1,
|
||||
#container_Series_0 {
|
||||
stroke-dasharray: 10px 10px;
|
||||
stroke-linejoin: round; stroke-linecap: round;
|
||||
-webkit-animation: dash 1s linear infinite;
|
||||
animation: dash 1s linear infinite;
|
||||
}
|
||||
|
||||
#container_Series_0_Point_3_Symbol {
|
||||
-webkit-animation: opac 1s ease-out infinite;
|
||||
animation: opac 1s ease-out infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes dash {
|
||||
100% {
|
||||
stroke-dashoffset: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dash {
|
||||
100% {
|
||||
stroke-dashoffset: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opac {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
import { Chart, LineSeries, Crosshair, DateTime, Legend, Tooltip, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(LineSeries, DateTime, Legend, Tooltip, Crosshair);
|
||||
|
||||
/**
|
||||
* Line Series with Dashed Line
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'y',
|
||||
intervalType: 'Years',
|
||||
edgeLabelPlacement: 'Shift',
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
labelFormat: '{value}%',
|
||||
rangePadding: 'None',
|
||||
minimum: 0,
|
||||
maximum: 40,
|
||||
interval: 10,
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: [
|
||||
{ x: new Date(2005, 0, 1), y: 12 }, { x: new Date(2006, 0, 1), y: 10.6 },
|
||||
{ x: new Date(2007, 0, 1), y: 15.6 }, { x: new Date(2008, 0, 1), y: 38.6 },
|
||||
{ x: new Date(2009, 0, 1), y: 27.4 }, { x: new Date(2010, 0, 1), y: 23.5 },
|
||||
{ x: new Date(2011, 0, 1), y: 16.6 }
|
||||
],
|
||||
xName: 'x', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10
|
||||
},
|
||||
dashArray: '5',
|
||||
yName: 'y', name: 'Banana',
|
||||
},
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: [
|
||||
{ x: new Date(2005, 0, 1), y: 9.5 }, { x: new Date(2006, 0, 1), y: 19.9 },
|
||||
{ x: new Date(2007, 0, 1), y: 25.2 }, { x: new Date(2008, 0, 1), y: 36 },
|
||||
{ x: new Date(2009, 0, 1), y: 16.6 }, { x: new Date(2010, 0, 1), y: 14.2 }, { x: new Date(2011, 0, 1), y: 10.3 }
|
||||
],
|
||||
xName: 'x', width: 2, marker: {
|
||||
visible: true,
|
||||
width: 10,
|
||||
height: 10,
|
||||
shape: 'Diamond'
|
||||
},
|
||||
dashArray: '10',
|
||||
yName: 'y', name: 'Apple',
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Fruits Production Statistics',
|
||||
/**
|
||||
* Initialize the user interaction feature tooltip and crosshair
|
||||
*/
|
||||
tooltip: {
|
||||
enable: true,
|
||||
shared: true
|
||||
},
|
||||
crosshair: {
|
||||
enable: true,
|
||||
line: {
|
||||
color: 'rgba(204,214,235,0.25)',
|
||||
width: Browser.isDevice ? 50 : 20,
|
||||
},
|
||||
lineType: 'Vertical'
|
||||
},
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,8 +1,13 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
<div style="float: right; margin-right: 10px;">
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates datalabel template support. In this sample, images are placed as datalabel by means of templates.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
Label content can be formatted by using the template option in dataLabel. Inside the template, you can add the placeholder
|
||||
|
|
@ -26,7 +31,7 @@
|
|||
#templateWrap img {
|
||||
border-radius: 0px;
|
||||
width: 24px;
|
||||
padding: 2px;
|
||||
padding: 4px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -68,4 +73,20 @@
|
|||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Male-Bootstrap' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#a16ee5;border-radius: 3px;">
|
||||
<img src='src/chart/images/male.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script id='Female-Bootstrap' type="text/x-template">
|
||||
<div id='templateWrap' style="background-color:#f7ce69;border-radius: 3px;">
|
||||
<img src='src/chart/images/female.png' />
|
||||
<div class='des' style="color:white; font-family:Roboto; font-style: medium; fontp-size:14px;padding-right:6px">
|
||||
<span>${point.y}M </span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
import { Chart, LineSeries, DataLabel, Marker, ILoadedEventArgs, ChartTheme, Category, ITextRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DataLabel, Marker, Category);
|
||||
import {
|
||||
Chart, LineSeries, DataLabel, Legend, ILoadedEventArgs,
|
||||
ChartTheme, Category, ITextRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DataLabel, Category, Legend);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
/**
|
||||
* dataLabel template
|
||||
* DataLabel template
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let theme: ChartTheme;
|
||||
|
|
@ -11,10 +15,11 @@ this.default = (): void => {
|
|||
color: '#606060', fontFamily: 'Roboto',
|
||||
fontStyle: 'medium', size: '14px'
|
||||
},
|
||||
chartArea: { border: { width: 0 }},
|
||||
chartArea: { border: { width: 0 } },
|
||||
// Initialize the chart axes
|
||||
primaryXAxis: {
|
||||
minimum: 2010, maximum: 2016,
|
||||
interval: 1,
|
||||
interval: Browser.isDevice ? 2 : 1,
|
||||
edgeLabelPlacement: 'Shift',
|
||||
labelStyle: {
|
||||
color: '#606060',
|
||||
|
|
@ -23,27 +28,25 @@ this.default = (): void => {
|
|||
size: '14px'
|
||||
},
|
||||
majorGridLines: { width: 0 },
|
||||
lineStyle: { color: '#eaeaea', width: 1 }
|
||||
lineStyle: { color: '#eaeaea', width: 1 }
|
||||
},
|
||||
primaryYAxis: {
|
||||
minimum: 900, maximum: 1300,
|
||||
labelFormat: '{value}M',
|
||||
title: Browser.isDevice ? '' : 'Population',
|
||||
labelStyle: {
|
||||
color: '#606060',
|
||||
fontFamily: 'Roboto',
|
||||
fontStyle: 'medium',
|
||||
size: '14px'
|
||||
color: '#606060', fontFamily: 'Roboto',
|
||||
fontStyle: 'medium', size: '14px'
|
||||
},
|
||||
interval: 80,
|
||||
majorGridLines: {
|
||||
color: '#eaeaea',
|
||||
width: 1
|
||||
color: '#eaeaea', width: 1
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#eaeaea',
|
||||
width: 1
|
||||
color: '#eaeaea', width: 1
|
||||
}
|
||||
},
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
name: 'Male',
|
||||
|
|
@ -59,7 +62,7 @@ this.default = (): void => {
|
|||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Top',
|
||||
margin: { right : 30},
|
||||
margin: { right: 30 },
|
||||
template: '#Male-Material'
|
||||
}
|
||||
}, width: 2
|
||||
|
|
@ -77,23 +80,23 @@ this.default = (): void => {
|
|||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Bottom',
|
||||
margin: { right : 15},
|
||||
margin: { right: 15 },
|
||||
template: '#Female-Material'
|
||||
}
|
||||
}, width: 2
|
||||
}
|
||||
],
|
||||
// Triggered text render and load event in chart
|
||||
textRender: (args: ITextRenderEventArgs) => {
|
||||
args.template = '#' + args.series.name + '-' + theme;
|
||||
},
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
theme = args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
args.chart.theme = theme;
|
||||
},
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
}
|
||||
width: Browser.isDevice ? '100%' : '80%'
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,9 +1,14 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div id="container" align="center"></div>
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="http://www.yr.no/place/USA/Alaska/Hatcher_Pass/statistics.html" target="_blank">www.yr.no</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates rendering of date time axis for chart by using weather statistics of Alaska for a year.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
DateTime data is used in this sample and data values are represented using dataLabel. Date time axis uses date time scale and displays the date time values as axis labels. To render dateTime axis, set <code>valueType</code> in axis to <code>DateTime</code>.
|
||||
|
|
|
|||
|
|
@ -1,41 +1,44 @@
|
|||
import { Chart, LineSeries, DateTime, Legend, Marker, DataLabel, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Legend, Marker, DataLabel);
|
||||
import { ChartTheme, Chart, LineSeries, DateTime, Legend, DataLabel, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Legend, DataLabel);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* DateTime Axis
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X Axis
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
title: 'Months',
|
||||
valueType: 'DateTime',
|
||||
labelFormat: 'yMMM',
|
||||
edgeLabelPlacement: 'Shift'
|
||||
labelFormat: 'MMM',
|
||||
edgeLabelPlacement: 'Shift',
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Temperature (Celsius)',
|
||||
minimum: -20,
|
||||
maximum: 25,
|
||||
interval: 5,
|
||||
maximum: 30,
|
||||
interval: 10,
|
||||
edgeLabelPlacement: 'Shift',
|
||||
labelFormat: '{value}°C'
|
||||
labelFormat: '{value}°C',
|
||||
lineStyle: { width: 0 },
|
||||
majorTickLines: { width: 0 },
|
||||
minorTickLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Line',
|
||||
dataSource: [
|
||||
{ x: new Date(2016, 0, 1), y: -7.1 }, { x: new Date(2016, 1, 1), y: -3.7 },
|
||||
{ x: new Date(2016, 2, 1), y: 0.8 }, { x: new Date(2016, 3, 1), y: 6.3 },
|
||||
{ x: new Date(2016, 3, 1), y: 6.3 },
|
||||
{ x: new Date(2016, 4, 1), y: 13.3 }, { x: new Date(2016, 5, 1), y: 18.0 },
|
||||
{ x: new Date(2016, 6, 1), y: 19.8 }, { x: new Date(2016, 7, 1), y: 18.1 },
|
||||
{ x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 },
|
||||
{ x: new Date(2016, 10, 1), y: -3.8 }, { x: new Date(2016, 11, 1), y: -6.8 },
|
||||
{ x: new Date(2016, 8, 1), y: 13.1 }, { x: new Date(2016, 9, 1), y: 4.1 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Warmest',
|
||||
|
|
@ -48,12 +51,10 @@ this.default = (): void => {
|
|||
}, {
|
||||
type: 'Line',
|
||||
dataSource: [
|
||||
{ x: new Date(2016, 0, 1), y: -17.4 }, { x: new Date(2016, 1, 1), y: -15.6 },
|
||||
{ x: new Date(2016, 2, 1), y: -12.3 }, { x: new Date(2016, 3, 1), y: -5.3 },
|
||||
{ x: new Date(2016, 3, 1), y: -5.3 },
|
||||
{ x: new Date(2016, 4, 1), y: 1.0 }, { x: new Date(2016, 5, 1), y: 6.9 },
|
||||
{ x: new Date(2016, 6, 1), y: 9.4 }, { x: new Date(2016, 7, 1), y: 7.6 },
|
||||
{ x: new Date(2016, 8, 1), y: 2.6 }, { x: new Date(2016, 9, 1), y: -4.9 },
|
||||
{ x: new Date(2016, 10, 1), y: -13.4 }, { x: new Date(2016, 11, 1), y: -16.4 },
|
||||
{ x: new Date(2016, 8, 1), y: 2.6 }, { x: new Date(2016, 9, 1), y: -4.9 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y', name: 'Coldest',
|
||||
|
|
@ -63,12 +64,13 @@ this.default = (): void => {
|
|||
}
|
||||
}
|
||||
],
|
||||
|
||||
width: Browser.isDevice ? '100%' : '60%',
|
||||
//Initializing Chart title
|
||||
title: 'Alaska Weather Statistics - 2016',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,11 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates doughnut chart for a educational institutional revenue with legends placed in chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to render doughnut chart. You can use <code>radius</code> and <code>innerRadius</code> properties to render the doughnut and also use <code>border</code>, <code>fill</code> properties to customize the point. <code>dataLabel</code> are used to represent individual data and its value.</p>
|
||||
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
|
||||
import {
|
||||
AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
|
||||
IAccAnimationCompleteEventArgs, AccPoints, IAccTextRenderEventArgs, AccumulationSelection,
|
||||
IAccLoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
IAccLoadedEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection);
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
|
||||
/**
|
||||
* Doghnut Sample
|
||||
|
|
@ -14,40 +17,32 @@ this.default = (): void => {
|
|||
let pie: AccumulationChart = new AccumulationChart({
|
||||
enableSmartLabels: true,
|
||||
selectionMode: 'Point',
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ 'x': 'Net-tution and Fees', y: 21, text: '21%' },
|
||||
{ 'x': 'Self-supporting Operations', y: 21, text: '21%'},
|
||||
{ 'x': 'Private Gifts', y: 8, text: '8%'},
|
||||
{ 'x': 'Self-supporting Operations', y: 21, text: '21%' },
|
||||
{ 'x': 'Private Gifts', y: 8, text: '8%' },
|
||||
{ 'x': 'All Other', y: 8, text: '8%' },
|
||||
{ 'x': 'Local Revenue', y: 4, text: '4%' },
|
||||
{ 'x': 'State Revenue', y: 21, text: '21%' },
|
||||
{ 'x': 'Federal Revenue', y: 16, text: '16%' }
|
||||
],
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
innerRadius: '40%',
|
||||
xName: 'x', yName: 'y', startAngle: 0,
|
||||
endAngle: 360, innerRadius: '40%',
|
||||
dataLabel: {
|
||||
visible: true, position: 'Inside',
|
||||
visible: true, position: 'Inside',
|
||||
name: 'text',
|
||||
font: {
|
||||
color: 'white',
|
||||
fontWeight: 'Bold',
|
||||
size: '14px'
|
||||
}
|
||||
font: { color: 'white', fontWeight: '600', size: '14px' }
|
||||
},
|
||||
}
|
||||
],
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
toggleVisibility: false,
|
||||
position: 'Right',
|
||||
height: '28%',
|
||||
width: '44%'
|
||||
visible: true, toggleVisibility: false,
|
||||
position: 'Right', height: '28%', width: '44%'
|
||||
},
|
||||
// Triggered animation complete, text render and load event
|
||||
animationComplete: (args: IAccAnimationCompleteEventArgs) => {
|
||||
centerTitle.style.fontSize = getFontSize(args.accumulation.initialClipRect.width);
|
||||
let rect: ClientRect = centerTitle.getBoundingClientRect();
|
||||
|
|
@ -66,14 +61,16 @@ this.default = (): void => {
|
|||
args.series.dataLabel.font.size = getFontSize(pie.initialClipRect.width);
|
||||
pie.animateSeries = true;
|
||||
},
|
||||
tooltip: {
|
||||
enable : true, format : '${point.x} <br> Composition: ${point.y}%'
|
||||
},
|
||||
title: 'Education Institutional Revenue',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
}
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
args.accumulation.legendSettings.position = Browser.isDevice ? 'Bottom' : 'Right';
|
||||
},
|
||||
tooltip: {
|
||||
enable: true, format: '${point.x} <br> Composition: ${point.y}%'
|
||||
},
|
||||
title: 'Education Institutional Revenue',
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
document.getElementById('container').appendChild(centerTitle);
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -21,24 +21,12 @@
|
|||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Outer Radius:
|
||||
<p id="radius" style="font-weight: normal;">0.8</p>
|
||||
<p id="radius" style="font-weight: normal;">0.70</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="pieradius" value="80" min="0" max="80" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Inner Radius:
|
||||
<p id="innerradius" style="font-weight: normal;">0</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="pieinnerradius" value="0" min="0" max="50" style="width:90%">
|
||||
<input type="range" name="range-min" id="pieradius" value="70" min="0" max="80" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -57,18 +45,23 @@
|
|||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Explode Index:
|
||||
<p id="explodeindex" style="font-weight: normal;">5</p>
|
||||
<p id="explodeindex" style="font-weight: normal;">0</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="pieexplodeindex" value="5" min="0" max="6" style="width:90%">
|
||||
<input type="range" name="range-min" id="pieexplodeindex" value="0" min="0" max="6" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates pie chart for mobile browser usage statistics. For pie chart, you can change start angle of chart by <code>Pie Angle</code> in properties panel. Outer radius for pie chart can be changed by <code>Outer Radius</code>. Explode Index and explode radius for chart can be changed by <code>Explode Radius</code> and <code>Explode Index</code>
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> are used to represent individual data and its value.</p>
|
||||
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs,
|
||||
AccumulationDataLabel } from '@syncfusion/ej2-charts';
|
||||
import {
|
||||
AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs,
|
||||
AccumulationDataLabel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
|
||||
/**
|
||||
|
|
@ -7,38 +9,40 @@ AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, Acc
|
|||
*/
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ 'x': 'Chrome', y: 37.42, text: 'Chrome 37.42%' }, { 'x': 'UC Browser', y: 16.94, text: 'UC Browser 16.94%' },
|
||||
{ 'x': 'iPhone', y: 17.94, text: 'iPhone 17.94%' },
|
||||
{ 'x': 'Internet Explorer Mobile', y: 2.04, text: 'Internet Explorer Mobile 2.04%' },
|
||||
{ 'x': 'Others', y: 3.69, text: 'Others 3.69%' }, { 'x': 'Opera mini', y: 11.37, text: 'Opera mini 11.37%' },
|
||||
{ 'x': 'Android', y: 11.73, text: 'Android 11.73%' }
|
||||
{ 'x': 'Chrome', y: 37.42, text: '37.42%' }, { 'x': 'UC Browser', y: 16.94, text: '16.94%' },
|
||||
{ 'x': 'iPhone', y: 17.94, text: '17.94%' },
|
||||
{ 'x': 'Others', y: 3.69, text: '3.69%' }, { 'x': 'Opera', y: 11.37, text: '11.37%' },
|
||||
{ 'x': 'Android', y: 11.73, text: '11.73%' }
|
||||
],
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Outside', name: 'text',
|
||||
connectorStyle: { type: 'Curve', length: '10%' },
|
||||
position: 'Inside', name: 'text',
|
||||
font: {
|
||||
size: '14px'
|
||||
fontWeight: '600',
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
radius: '70%', xName: 'x',
|
||||
yName: 'y', startAngle: 0,
|
||||
endAngle: 360, innerRadius: '0%',
|
||||
explode: true, explodeOffset: '10%', explodeIndex: 5
|
||||
explode: true, explodeOffset: '10%', explodeIndex: 0
|
||||
}
|
||||
],
|
||||
enableSmartLabels: true,
|
||||
legendSettings: {
|
||||
visible: false,
|
||||
},
|
||||
// Initialize tht tooltip
|
||||
tooltip: { enable: true, format: '${point.x} <br> ${point.y} %' },
|
||||
title: 'Mobile Browser Statistics',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
|
|
@ -65,17 +69,6 @@ this.default = (): void => {
|
|||
document.getElementById('pieradius').onchange = (e: Event) => {
|
||||
radiuschange(+(document.getElementById('pieradius') as HTMLInputElement).value);
|
||||
};
|
||||
function innerRadius(value: number): void {
|
||||
pie.series[0].innerRadius = value + '%';
|
||||
document.getElementById('innerradius').innerHTML = (value / 100).toFixed(2);
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('pieinnerradius').onpointermove = document.getElementById('pieinnerradius').ontouchmove =
|
||||
document.getElementById('pieinnerradius').onchange = (e: Event) => {
|
||||
innerRadius(+(document.getElementById('pieinnerradius') as HTMLInputElement).value);
|
||||
};
|
||||
function exploderadius(value: number): void {
|
||||
pie.visibleSeries[0].explodeOffset = value + '%';
|
||||
document.getElementById('exploderadius').innerHTML = (value / 100).toFixed(2);
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\nimport {\n AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs,\n AccumulationDataLabel\n} from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);\n/**\n * Doughnut Sample\n */\n\n let pie: AccumulationChart = new AccumulationChart({\n // Initialize the chart series\n series: [\n {\n dataSource: [{ x: 'Labour', y: 28, text: '28%' }, { x: 'Legal', y: 10, text: '10%' },\n { x: 'Production', y: 20, text: '20%' }, { x: 'License', y: 15, text: '15%' },\n { x: 'Facilities', y: 23, text: '23%' }, { x: 'Taxes', y: 17, text: '17%' },\n { x: 'Insurance', y: 12, text: '12%' }],\n dataLabel: {\n visible: true,\n name: 'text',\n position: 'Inside',\n font: {\n fontWeight: '600',\n color: '#ffffff'\n }\n },\n radius: '70%', xName: 'x',\n yName: 'y', startAngle: 0,\n endAngle: 360, innerRadius: '40%',\n explode: true, explodeOffset: '10%', explodeIndex: 3\n }\n ],\n enableSmartLabels: true,\n legendSettings: {\n visible: false,\n },\n // Initialize the tooltip\n tooltip: { enable: true, format: '${point.x} <br> ${point.y} %' },\n title: 'Project Cost Breakdown',\n load: (args: IAccLoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\n args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));\n }\n });\n pie.appendTo('#container');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/production/demos/styles/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section\">\n <div id=\"container\"></div>\n</div>\n\n\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\",\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\",\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates doughnut chart for a project break down statistics.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to render and configure the pie chart. You can use <code>border</code>, <code>fill</code> properties to customize the pie point. <code>dataLabel</code> are used to represent individual data and its value.</p>
|
||||
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import {
|
||||
AccumulationTheme, AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs,
|
||||
AccumulationDataLabel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
/**
|
||||
* Doughnut Sample
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
// Initialize the chart series
|
||||
series: [
|
||||
{
|
||||
dataSource: [{ x: 'Labour', y: 28, text: '28%' }, { x: 'Legal', y: 10, text: '10%' },
|
||||
{ x: 'Production', y: 20, text: '20%' }, { x: 'License', y: 15, text: '15%' },
|
||||
{ x: 'Facilities', y: 23, text: '23%' }, { x: 'Taxes', y: 17, text: '17%' },
|
||||
{ x: 'Insurance', y: 12, text: '12%' }],
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
name: 'text',
|
||||
position: 'Inside',
|
||||
font: {
|
||||
fontWeight: '600',
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
radius: '70%', xName: 'x',
|
||||
yName: 'y', startAngle: 0,
|
||||
endAngle: 360, innerRadius: '40%',
|
||||
explode: true, explodeOffset: '10%', explodeIndex: 3
|
||||
}
|
||||
],
|
||||
enableSmartLabels: true,
|
||||
legendSettings: {
|
||||
visible: false,
|
||||
},
|
||||
// Initialize the tooltip
|
||||
tooltip: { enable: true, format: '${point.x} <br> ${point.y} %' },
|
||||
title: 'Project Cost Breakdown',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -8,6 +8,11 @@
|
|||
</div>
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates drill down sample with pie chart for a automobiles sales by category. By clicking one category, you can navigate to other sub-category by which companies are differentiated.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to achieve <code>drilldown</code> concept using pie control. An automobile sales has been shown by different category, on clicking each category, you can navigate to next level, which shows the sales of those category
|
||||
|
|
|
|||
|
|
@ -1,111 +1,113 @@
|
|||
import {
|
||||
AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs, IAccTextRenderEventArgs,
|
||||
chartMouseClick, IMouseEventArgs, Index, indexFinder, AccumulationDataLabel, AccumulationChartModel
|
||||
AccumulationTheme, getElement, AccumulationChart, AccumulationLegend, PieSeries,
|
||||
AccumulationTooltip, IAccLoadedEventArgs, IAccTextRenderEventArgs,
|
||||
chartMouseClick, IMouseEventArgs, Index, indexFinder, AccumulationDataLabel,
|
||||
AccumulationChartModel, AccumulationAnnotation
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel, AccumulationAnnotation);
|
||||
|
||||
/**
|
||||
* Drill down
|
||||
* Drill Down Sample
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let suvs: Object = [{ x: 'Toyota', y: 8 }, { x: 'Ford', y: 12 }, { x: 'GM', y: 17 }, { x: 'Renault', y: 6 }, { x: 'Fiat', y: 3 },
|
||||
{ x: 'Hyundai', y: 16 }, { x: 'Honda', y: 8 }, { x: 'Maruthi', y: 10 }, { x: 'BMW', y: 20 }];
|
||||
|
||||
let cars: Object = [{ x: 'Toyota', y: 7 }, { x: 'Chrysler', y: 12 }, { x: 'Nissan', y: 9 }, { x: 'Ford', y: 15 }, { x: 'Tata', y: 10 },
|
||||
{ x: 'Mahindra', y: 7 }, { x: 'Renault', y: 8 }, { x: 'Skoda', y: 5 }, { x: 'Volkswagen', y: 15 }, { x: 'Fiat', y: 3 }];
|
||||
|
||||
let pickups: Object = [{ x: 'Nissan', y: 9 }, { x: 'Chrysler', y: 4 }, { x: 'Ford', y: 7 }, { x: 'Toyota', y: 20 },
|
||||
{ x: 'Suzuki', y: 13 }, { x: 'Lada', y: 12 }, { x: 'Bentley', y: 6 }, { x: 'Volvo', y: 10 }, { x: 'Audi', y: 19 }];
|
||||
|
||||
let minivans: Object = [{ x: 'Hummer', y: 11 }, { x: 'Ford', y: 5 }, { x: 'GM', y: 12 }, { x: 'Chrysler', y: 3 }, { x: 'Jaguar', y: 9 },
|
||||
{ x: 'Fiat', y: 8 }, { x: 'Honda', y: 15 }, { x: 'Hyundai', y: 4 }, { x: 'Scion', y: 11 }, { x: 'Toyota', y: 17 }];
|
||||
|
||||
let clickInstance: AccumulationChartModel = {
|
||||
series: [{ type: 'Pie', dataSource: suvs, xName: 'x', yName: 'y', dataLabel: { visible: true, position: 'Outside' } }],
|
||||
textRender: (args: IAccTextRenderEventArgs) => {
|
||||
series: [{
|
||||
type: 'Pie', dataSource: suvs, xName: 'x', yName: 'y',
|
||||
dataLabel: { visible: true, position: 'Outside' }, innerRadius: '30%',
|
||||
}
|
||||
], textRender: (args: IAccTextRenderEventArgs) => {
|
||||
args.text = args.point.x + ' ' + args.point.y + ' %';
|
||||
}, annotations: [{
|
||||
content: '<div id="back" style="cursor:pointer;padding:3px;width:30px; height:30px;">' +
|
||||
'<img src="./src/chart/images/back.png" id="back" />', region: 'Series', x: '50%', y: '50%'
|
||||
}], chartMouseClick: (args: IMouseEventArgs) => {
|
||||
if (args.target.indexOf('back') > -1) {
|
||||
let tooltip: Element = document.getElementsByClassName('e-tooltip-wrap')[0];
|
||||
if (tooltip) { tooltip.remove(); }
|
||||
pie.destroy(); pie.removeSvg(); pie = null; pie = new AccumulationChart(instance);
|
||||
pie.appendTo('#container');
|
||||
(getElement('category') as HTMLButtonElement).style.visibility = 'hidden';
|
||||
(getElement('symbol') as HTMLElement).style.visibility = 'hidden';
|
||||
(<HTMLElement>getElement('text')).style.visibility = 'hidden';
|
||||
}
|
||||
},
|
||||
enableSmartLabels: true,
|
||||
legendSettings: { visible: false }, enableSmartLabels: true,
|
||||
tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
};
|
||||
let pointClick: EmitType<IMouseEventArgs> = (args: IMouseEventArgs) => {
|
||||
let index: Index = indexFinder(args.target);
|
||||
if (document.getElementById(pie.element.id + '_Series_' + index.series + '_Point_' + index.point)) {
|
||||
if (getElement(pie.element.id + '_Series_' + index.series + '_Point_' + index.point)) {
|
||||
let tooltip: Element = document.getElementsByClassName('e-tooltip-wrap')[0];
|
||||
if (tooltip) { tooltip.remove(); }
|
||||
pie.destroy(); pie.removeSvg();
|
||||
pie = null;
|
||||
pie.destroy(); pie.removeSvg(); pie = null;
|
||||
switch (index.point) {
|
||||
case 0:
|
||||
clickInstance.series[0].dataSource = suvs;
|
||||
clickInstance.series[0].dataSource = suvs; getElement('text').innerHTML = 'SUV';
|
||||
clickInstance.title = 'Automobile Sales in the SUV segment';
|
||||
document.getElementById('text').innerHTML = 'SUV';
|
||||
break;
|
||||
case 1:
|
||||
clickInstance.series[0].dataSource = cars;
|
||||
clickInstance.series[0].dataSource = cars; getElement('text').innerHTML = 'Car';
|
||||
clickInstance.title = 'Automobile Sales in the Car segment';
|
||||
document.getElementById('text').innerHTML = 'Car';
|
||||
break;
|
||||
case 2:
|
||||
clickInstance.series[0].dataSource = pickups;
|
||||
clickInstance.series[0].dataSource = pickups; getElement('text').innerHTML = 'Pickup';
|
||||
clickInstance.title = 'Automobile Sales in the Pickup segment';
|
||||
document.getElementById('text').innerHTML = 'Pickup';
|
||||
break;
|
||||
case 3:
|
||||
clickInstance.series[0].dataSource = minivans;
|
||||
clickInstance.series[0].dataSource = minivans; getElement('text').innerHTML = 'Minivan';
|
||||
clickInstance.title = 'Automobile Sales in the Minivan segment';
|
||||
document.getElementById('text').innerHTML = 'Minivan';
|
||||
break;
|
||||
}
|
||||
pie = new AccumulationChart(clickInstance);
|
||||
pie.appendTo('#container');
|
||||
document.getElementById('category').style.visibility = 'visible';
|
||||
document.getElementById('symbol').style.visibility = 'visible';
|
||||
document.getElementById('text').style.visibility = 'visible';
|
||||
pie = new AccumulationChart(clickInstance); pie.appendTo('#container');
|
||||
(<HTMLElement>getElement('symbol')).style.visibility = 'visible';
|
||||
(<HTMLElement>getElement('category')).style.visibility = 'visible';
|
||||
(<HTMLElement>getElement('text')).style.visibility = 'visible';
|
||||
}
|
||||
};
|
||||
let instance: AccumulationChartModel = {
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 },
|
||||
{ x: 'Minivan', y: 23 }
|
||||
],
|
||||
dataSource: [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }],
|
||||
dataLabel: {
|
||||
visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '10%' },
|
||||
font: { size: '14px', color: 'white' }
|
||||
font: { fontWeight: '600', color: 'white' }
|
||||
},
|
||||
radius: '70%', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',
|
||||
explode: true, explodeOffset: '10%', explodeIndex: 2,
|
||||
}
|
||||
],
|
||||
enableSmartLabels: false,
|
||||
legendSettings: { visible: false }, chartMouseClick: pointClick,
|
||||
textRender: (args: IAccTextRenderEventArgs) => {
|
||||
args.text = args.point.x + ' ' + args.point.y + ' %';
|
||||
},
|
||||
], enableSmartLabels: false, legendSettings: { visible: false }, chartMouseClick: pointClick,
|
||||
textRender: (args: IAccTextRenderEventArgs) => { args.text = args.point.x + ' ' + args.point.y + ' %'; },
|
||||
tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
|
||||
title: 'Automobile Sales by Category',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.accumulation.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
};
|
||||
let pie: AccumulationChart = new AccumulationChart(instance);
|
||||
pie.appendTo('#container');
|
||||
document.getElementById('category').onclick = (e: MouseEvent) => {
|
||||
let pie: AccumulationChart = new AccumulationChart(instance); pie.appendTo('#container');
|
||||
(getElement('category') as HTMLElement).onclick = (e: MouseEvent) => {
|
||||
let tooltip: Element = document.getElementsByClassName('e-tooltip-wrap')[0];
|
||||
if (tooltip) { tooltip.remove(); }
|
||||
pie.destroy(); pie.removeSvg();
|
||||
pie = null; pie = new AccumulationChart(instance);
|
||||
pie.appendTo('#container');
|
||||
(e.target as HTMLButtonElement).style.visibility = 'hidden';
|
||||
document.getElementById('symbol').style.visibility = 'hidden';
|
||||
document.getElementById('text').style.visibility = 'hidden';
|
||||
(getElement('symbol') as HTMLElement).style.visibility = 'hidden';
|
||||
(getElement('text') as HTMLElement).style.visibility = 'hidden';
|
||||
};
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,32 @@
|
|||
<div class="control-section">
|
||||
<div id="container" align="center"></div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates Exponential Moving Average indicator in the chart.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the EMA Indicator. You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use EMA Indicator, we need to Inject
|
||||
<code>EmaIndicator</code> module using <code>chart.Inject(EmaIndicator)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the EMA Indicator can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
import {
|
||||
Chart, CandleSeries, Category, Tooltip, ILoadedEventArgs, DateTime, Zoom, Logarithmic, ChartTheme,
|
||||
Crosshair, LineSeries, EmaIndicator
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { chartData } from './financial-data';
|
||||
import { Browser } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(
|
||||
CandleSeries, Category, Tooltip, DateTime, Zoom, Logarithmic, Crosshair, LineSeries,
|
||||
EmaIndicator
|
||||
);
|
||||
|
||||
/**
|
||||
* EMA Indicator
|
||||
*/
|
||||
this.default = (): void => {
|
||||
|
||||
let chart: Chart = new Chart({
|
||||
// Initialize the chart axes
|
||||
primaryXAxis: {
|
||||
valueType: 'DateTime',
|
||||
intervalType: 'Months',
|
||||
majorGridLines: { width: 0 },
|
||||
zoomFactor: 0.4, zoomPosition: 0.4,
|
||||
skeleton: 'yMd',
|
||||
crosshairTooltip: { enable: true },
|
||||
}, chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
primaryYAxis: {
|
||||
title: 'Price',
|
||||
labelFormat: '${value}M',
|
||||
minimum: 50, maximum: 170, interval: 30,
|
||||
majorGridLines: { width: 1 },
|
||||
lineStyle: { width: 0 }
|
||||
},
|
||||
// Initialize the chart series
|
||||
series: [{
|
||||
dataSource: chartData, width: 2,
|
||||
xName: 'x', yName: 'y', low: 'low', high: 'high', close: 'close', volume: 'volume', open: 'open',
|
||||
name: 'Apple Inc', bearFillColor: '#2ecd71', bullFillColor: '#e74c3d',
|
||||
type: 'Candle', animation: { enable: false }
|
||||
}],
|
||||
// Initialize the indicators
|
||||
indicators: [{
|
||||
type: 'Ema', field: 'Close', seriesName: 'Apple Inc', fill: '#606eff',
|
||||
period: 14, animation: { enable: true }
|
||||
}],
|
||||
/**
|
||||
* Initialize user interaction features tooltip, crosshiar and zooming
|
||||
*/
|
||||
tooltip: {
|
||||
enable: true, shared: true
|
||||
},
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
zoomSettings: {
|
||||
enableMouseWheelZooming: true,
|
||||
enableSelectionZooming: true,
|
||||
enableDeferredZooming: true,
|
||||
enablePinchZooming: true,
|
||||
mode: 'X'
|
||||
},
|
||||
title: 'AAPL - 2012-2017',
|
||||
width: Browser.isDevice ? '100%' : '80%',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
legendSettings: { visible: false }
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,63 @@
|
|||
<div>
|
||||
<div class="col-lg-8 control-section">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div class="col-lg-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 50%">
|
||||
<div>Series Type:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<select id="SelectSeriesType">
|
||||
<option>Column</option>
|
||||
<option>Area</option>
|
||||
<option>Spline</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 50%">
|
||||
<div>Empty Point Mode:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<div>
|
||||
<select id="emptypointmode">
|
||||
<option>Gap</option>
|
||||
<option>Drop</option>
|
||||
<option>Average</option>
|
||||
<option>Zero</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates empty point rendering for chart. You can change mode of empty point by using <code>Empty Point Mode</code> in property panel.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the empty points. You can use <code>border</code>,
|
||||
<code>fill</code>, <code>mode</code> properties to customize the empty points.
|
||||
</p>
|
||||
<p>
|
||||
Tooltip is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.
|
||||
</p>
|
||||
<p>
|
||||
More information on the empty points can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
import {
|
||||
Chart, ColumnSeries, ChartTheme, SplineSeries, AreaSeries, ChartSeriesType,
|
||||
EmptyPointMode, Category, Legend, Tooltip, ILoadedEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Tooltip, SplineSeries, AreaSeries);
|
||||
|
||||
/**
|
||||
* Column Series with Empty Points
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
//Initializing Primary X and Y Axis
|
||||
primaryXAxis: {
|
||||
title: 'Product', valueType: 'Category', interval: 1
|
||||
},
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Profit', minimum: 0, maximum: 100, interval: 20, labelFormat: '{value}%'
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column', xName: 'x', width: 2, yName: 'y', name: 'Profit',
|
||||
dataSource: [
|
||||
{ x: 'Rice', y: 80 }, { x: 'Wheat', y: null }, { x: 'Oil', y: 70 },
|
||||
{ x: 'Corn', y: 60 }, { x: 'Gram', y: null },
|
||||
{ x: 'Milk', y: 70 }, { x: 'Peas', y: 80 },
|
||||
{ x: 'Fruit', y: 60 }, { x: 'Butter', y: null }
|
||||
],
|
||||
marker: { visible: true, height: 10, width: 10 },
|
||||
emptyPointSettings: {
|
||||
fill: '#e6e6e6',
|
||||
}
|
||||
},
|
||||
],
|
||||
legendSettings: { visible: false },
|
||||
//Initializing Chart title
|
||||
title: 'Annual Product-Wise Profit Analysis',
|
||||
// Tooltip initialized
|
||||
tooltip: { enable: true },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let mode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].emptyPointSettings.mode = <EmptyPointMode>mode.value;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
mode.appendTo('#emptypointmode');
|
||||
let edgeMode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].type = <ChartSeriesType>edgeMode.value;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
edgeMode.appendTo('#SelectSeriesType');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,119 @@
|
|||
<div>
|
||||
<div class="col-md-8 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="container" style="width:92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Error Bar Type:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div>
|
||||
<select name="selectIndex" autocomplete="off" id="selmode" style="width:60%;margin-left: -5px">
|
||||
<option value="Fixed">Fixed</option>
|
||||
<option value="Percentage">Percentage</option>
|
||||
<option value="StandardDeviation">StandardDeviation</option>
|
||||
<option value="StandardError">StandardError</option>
|
||||
<option value="Custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Drawing Mode:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div>
|
||||
<select name="selectIndex" autocomplete="off" id="drawmode" style="margin-left: -5px">
|
||||
<option value="Vertical">Vertical</option>
|
||||
<option value="Horizontal">Horizontal</option>
|
||||
<option value="Both">Both</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Drawing Direction:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div>
|
||||
<select name="selectIndex" autocomplete="off" id="direction" style="margin-left: -5px">
|
||||
<option value="Both">Both</option>
|
||||
<option value="Minus">Minus</option>
|
||||
<option value="Plus">Plus</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Vertical Error:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style='margin-top: 0px;'>
|
||||
<input type="text" id="verticalerrror" style="margin-left: -5px">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 60%">
|
||||
<div>Horizontal Error:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div style='margin-top: 0px;'>
|
||||
<input type="text" id="horizontalerrror" style="margin-left: -5px">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates error bar in a series for sales distribution of car over a period. In property panel, you have options to change error bar type, drawing mode and drawing direction of error bar by means of dropdown. And also you can change vertical and horizontal error values.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the error bar charts. Line type charts are used for cartesian type
|
||||
series. You can use error bar by set
|
||||
<code>visible</code> property to true. You can change the error bar rendering type using
|
||||
<code>type</code> property. like fixedValue, percentage, standardDeviation, standardError and custom) option of errorBar. To change
|
||||
the error bar line length you can use
|
||||
<code>verticalError</code> property.
|
||||
</p>
|
||||
<p>Chart supports the following error bar types.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>Fixed</code> - Renders a fixed type error bar.</li>
|
||||
<li>
|
||||
<code>Percentage</code> - Renders a percentage type error bar.</li>
|
||||
<li>
|
||||
<code>StandardDeviation</code> - Renders a standard deviation type error bar.</li>
|
||||
<li>
|
||||
<code>StandardError</code> - Renders a standard error type error bar.</li>
|
||||
<li>
|
||||
<code>Custom</code> - Renders a custom type error bar.</li>
|
||||
</ul>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use error bar, we need to inject
|
||||
<code>ErrorBar</code> module using
|
||||
<code>Chart.Inject(ErroBar)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
More information on the error bar can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-axis.html#valuetype-valuetype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
import { NumericTextBox } from '@syncfusion/ej2-inputs';
|
||||
import {
|
||||
ChartTheme, Chart, ErrorBar, ScatterSeries, Tooltip, Category,
|
||||
ILoadedEventArgs, ErrorBarMode, ErrorBarType, ErrorBarDirection,
|
||||
IPointRenderEventArgs
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { fabricColors, materialColors, bootstrapColors } from './theme-color';
|
||||
Chart.Inject(ScatterSeries, Category, ErrorBar, Tooltip);
|
||||
/**
|
||||
* Error bar Sample
|
||||
*/
|
||||
let pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[args.point.index % 10];
|
||||
} else {
|
||||
args.fill = bootstrapColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
valueType: 'Category', interval: 1, majorGridLines: { width: 0 }
|
||||
},
|
||||
chartArea: {
|
||||
border: { width: 0 }
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
labelFormat: '{value}%', minimum: 15, maximum: 45, lineStyle: { width: 0 }
|
||||
},
|
||||
pointRender: pointRender,
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Scatter',
|
||||
dataSource: [
|
||||
{ x: 'IND', y: 24 }, { x: 'AUS', y: 20 }, { x: 'USA', y: 35 },
|
||||
{ x: 'DEU', y: 27 }, { x: 'ITA', y: 30 },
|
||||
{ x: 'UK', y: 41 }, { x: 'RUS', y: 26 }
|
||||
],
|
||||
xName: 'x', width: 2, yName: 'y', marker: { height: 10, width: 10 },
|
||||
errorBar: { visible: true, verticalError: 3, horizontalError: 3 }, name: 'Sales'
|
||||
},
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Sales Distribution of Car by Region',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
},
|
||||
//Initializing tooltip
|
||||
tooltip: { enable: true },
|
||||
legendSettings: {
|
||||
visible: false
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let selmode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].errorBar.type = <ErrorBarType>selmode.value;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
selmode.appendTo('#selmode');
|
||||
let drawmode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].errorBar.mode = <ErrorBarMode>drawmode.value;
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.refresh();
|
||||
}
|
||||
});
|
||||
drawmode.appendTo('#drawmode');
|
||||
let direction: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
placeholder: 'Select Range Bar Color',
|
||||
width: 120,
|
||||
change: () => {
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[0].errorBar.direction = <ErrorBarDirection>direction.value; chart.refresh();
|
||||
}
|
||||
});
|
||||
direction.appendTo('#direction');
|
||||
let verticalerrror: NumericTextBox = new NumericTextBox({
|
||||
value: 3,
|
||||
min: 1,
|
||||
max: 20,
|
||||
width: 120,
|
||||
step: 1,
|
||||
change: () => {
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[0].errorBar.verticalError = verticalerrror.value; chart.refresh();
|
||||
}
|
||||
});
|
||||
verticalerrror.appendTo('#verticalerrror');
|
||||
let horizontalerrror: NumericTextBox = new NumericTextBox({
|
||||
value: 3,
|
||||
min: 1,
|
||||
max: 20,
|
||||
width: 120,
|
||||
step: 1,
|
||||
change: () => {
|
||||
chart.series[0].animation.enable = false;
|
||||
chart.series[0].errorBar.horizontalError = horizontalerrror.value; chart.refresh();
|
||||
}
|
||||
});
|
||||
horizontalerrror.appendTo('#horizontalerrror');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,69 @@
|
|||
<div>
|
||||
<div class="col-lg-9 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 40%">
|
||||
<div>Export Type:
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 60%;">
|
||||
<div style="margin-left: -10px">
|
||||
<select id="mode">
|
||||
<option value='JPEG'>JPEG</option>
|
||||
<option value='PNG'>PNG</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 40%">
|
||||
<div>File Name:</div>
|
||||
</td>
|
||||
<td style="width: 40%;">
|
||||
<div class="e-float-input" style='margin-top: 0px;'>
|
||||
<input type="text" value="Chart" id="fileName" style="margin-left: -10px">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="button-control" style="height: 50px" align='center'>
|
||||
<td align='center'>
|
||||
<button id="togglebtn">Export</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates export feature in chart. By clicking <code>Export </code>, you can export chart. you can change export type using <code>Export type</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the export. The rendered chart can be exported as either JPEG or PNG format.
|
||||
It can be achieved using Blob and it's supported only in modern browsers.
|
||||
</p>
|
||||
<p>
|
||||
More information on the export can be found in this
|
||||
<a target="_blank" href="http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype">documentation section</a>.
|
||||
</p>
|
||||
</div>
|
||||
<style>
|
||||
#button-control {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#control-container {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.e-play-icon::before {
|
||||
content: '\e728';
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
import {
|
||||
Chart, ColumnSeries, IPointRenderEventArgs,
|
||||
Category, Legend, ILoadedEventArgs, ChartTheme,
|
||||
ExportType
|
||||
} from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, Category, Legend);
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
import { fabricColors, materialColors, bootstrapColors } from './theme-color';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { DropDownList } from '@syncfusion/ej2-dropdowns';
|
||||
|
||||
/**
|
||||
* Print Sample
|
||||
*/
|
||||
let labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index % 10];
|
||||
} else if (selectedTheme === 'material') {
|
||||
args.fill = materialColors[args.point.index % 10];
|
||||
} else {
|
||||
args.fill = bootstrapColors[args.point.index % 10];
|
||||
}
|
||||
};
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
title: 'Countries',
|
||||
valueType: 'Category',
|
||||
majorGridLines: { width: 0 }
|
||||
|
||||
},
|
||||
chartArea: {
|
||||
border: {
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
pointRender: labelRender,
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Measurements',
|
||||
labelFormat: '{value}GW',
|
||||
minimum: 0,
|
||||
maximum: 40,
|
||||
interval: 10,
|
||||
majorGridLines: { width: 0 }
|
||||
},
|
||||
//Initializing Chart Series
|
||||
series: [
|
||||
{
|
||||
type: 'Column',
|
||||
dataSource: [
|
||||
{ x: 'DEU', y: 35.5 }, { x: 'CHN', y: 18.3 }, { x: 'ITA', y: 17.6 }, { x: 'JPN', y: 13.6 },
|
||||
{ x: 'US', y: 12 }, { x: 'ESP', y: 5.6 }, { x: 'FRA', y: 4.6 }, { x: 'AUS', y: 3.3 },
|
||||
{ x: 'BEL', y: 3 }, { x: 'UK', y: 2.9 }
|
||||
],
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y'
|
||||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Top 10 Countries Using Solar Power',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let mode: DropDownList = new DropDownList({
|
||||
index: 0,
|
||||
width: 100
|
||||
});
|
||||
mode.appendTo('#mode');
|
||||
let togglebtn: Button = new Button({
|
||||
iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true,
|
||||
});
|
||||
togglebtn.appendTo('#togglebtn');
|
||||
document.getElementById('togglebtn').onclick = () => {
|
||||
let fileName: string = (<HTMLInputElement>(document.getElementById('fileName'))).value;
|
||||
chart.export(<ExportType>mode.value, fileName);
|
||||
};
|
||||
};
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,49 @@
|
|||
<div>
|
||||
<div class="col-lg-9 control-section">
|
||||
<div class="content-wrapper">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 property-section">
|
||||
<table id="property" title="Properties" style="width: 100%">
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Neck Width:
|
||||
<p id="neckWidth" style="font-weight: normal;">15%</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="chartneckwidth" value="15" min="0" max="50" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Neck Height:
|
||||
<p id="neckHeight" style="font-weight: normal;">18%</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="chartneckheight" value="18" min="0" max="50" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="action-description">
|
||||
<p>
|
||||
This sample demonstrates funnel chart for website visitors for various purposes. You can change neck height and neck width of a funnel chart using <code>Neck Width</code> and <code>Neck Height</code> in the property panel.
|
||||
</p>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to render funnel chart.<code>dataLabel</code> are used to represent individual data and its value.</p>
|
||||
<p> <code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
chart component features are segregated into individual feature-wise modules. To use Funnel series, we need to Injecting
|
||||
<code>FunnelSeries</code> module using <code>chart.Inject(CandleSeries)</code> method.
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import {
|
||||
AccumulationChart, AccumulationLegend, FunnelSeries, AccumulationTooltip, IAccLoadedEventArgs,
|
||||
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
|
||||
} from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, FunnelSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
|
||||
/**
|
||||
* Funnel Sample
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let data: object[] = [{ x: 'Renewed', y: 18.20, text: '18.20%' },
|
||||
{ x: 'Subscribe', y: 27.3, text: '27.3%' },
|
||||
{ x: 'Support', y: 55.9, text: '55.9%' },
|
||||
{ x: 'Downloaded', y: 76.8, text: '76.8%' },
|
||||
{ x: 'Visited', y: 100, text: '100%' }];
|
||||
|
||||
let chart: AccumulationChart = new AccumulationChart({
|
||||
//Initializing Chart Series
|
||||
series: [{
|
||||
type: 'Funnel', dataSource: data, xName: 'x', yName: 'y', width: '60%', height: '80%',
|
||||
neckWidth: '15%', gapRatio: 0.03, neckHeight: '18%',
|
||||
dataLabel: {
|
||||
name: 'text', visible: true, position: 'Inside', font: {
|
||||
fontWeight: '600'
|
||||
}
|
||||
}, explode: true,
|
||||
}],
|
||||
//Initializing tooltip
|
||||
tooltip: { enable: true, format: '${point.x} : ${point.y} %' },
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
selectedTheme = selectedTheme ? selectedTheme : 'Material';
|
||||
args.accumulation.theme = <AccumulationTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
|
||||
if (args.accumulation.availableSize.width < args.accumulation.availableSize.height) {
|
||||
args.accumulation.series[0].width = '80%';
|
||||
args.accumulation.series[0].height = '70%';
|
||||
}
|
||||
},
|
||||
resized: (args: IAccResizeEventArgs) => {
|
||||
let bounds: ClientRect = document.getElementById('container').getBoundingClientRect();
|
||||
if (bounds.width < bounds.height) {
|
||||
args.accumulation.series[0].width = '80%';
|
||||
args.accumulation.series[0].height = '70%';
|
||||
} else {
|
||||
args.accumulation.series[0].width = '60%';
|
||||
args.accumulation.series[0].height = '80%';
|
||||
}
|
||||
},
|
||||
//Initializing Chart title
|
||||
title: 'Website Visitors',
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
function neckWidth(value: number): void {
|
||||
chart.series[0].neckWidth = value + '%';
|
||||
document.getElementById('neckWidth').innerHTML = value + '%';
|
||||
chart.removeSvg();
|
||||
chart.refreshSeries();
|
||||
chart.refreshChart();
|
||||
}
|
||||
document.getElementById('chartneckwidth').onpointermove = document.getElementById('chartneckwidth').ontouchmove =
|
||||
document.getElementById('chartneckwidth').onchange = (e: Event) => {
|
||||
neckWidth(+(document.getElementById('chartneckwidth') as HTMLInputElement).value);
|
||||
};
|
||||
function neckHeight(value: number): void {
|
||||
chart.series[0].neckHeight = value + '%';
|
||||
document.getElementById('neckHeight').innerHTML = value + '%';
|
||||
chart.removeSvg();
|
||||
chart.refreshSeries();
|
||||
chart.refreshChart();
|
||||
}
|
||||
document.getElementById('chartneckheight').onpointermove = document.getElementById('chartneckheight').ontouchmove =
|
||||
document.getElementById('chartneckheight').onchange = (e: Event) => {
|
||||
neckHeight(+(document.getElementById('chartneckheight') as HTMLInputElement).value);
|
||||
};
|
||||
};
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче