config(EJ2-2871): Added circular gauge and pie samples.
This commit is contained in:
pipeline
Родитель
d236a3e5e4
Коммит
0139107bbe
131
index.html
131
index.html
|
|
@ -29,89 +29,88 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="header-right"></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>
|
||||
</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 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>
|
||||
</div>
|
||||
<div id="control-container">
|
||||
<div class="control-fluid">
|
||||
<div class="control-panel">
|
||||
<div class="sample-nav">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="control-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="source-panel" class="hidden">
|
||||
<div id="source-tab">
|
||||
<ul class='nav nav-tabs' role='tablist'>
|
||||
<li class="active" id='hcode' role='presentation'><a id='htab' role='tab' aria-controls='html-tab' aria-selected='true'>Markup</a></li>
|
||||
<li id='tcode' role='presentation'><a id='ttab' role='tab' aria-controls='ts-tab'>Code</a></li>
|
||||
<li id='plnk'><a id='plnkr'>Open in Plunker</a></li>
|
||||
</ul>
|
||||
<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="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>
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='footer' role="contentinfo">
|
||||
<div class="footer-left">
|
||||
<span>Copyright © 2001-2017 Syncfusion Inc.</span>
|
||||
<div id="control-container">
|
||||
<div class="control-fluid">
|
||||
<div class="container-fluid">
|
||||
|
||||
<div id="control-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="//www.syncfusion.com" target="_blank">
|
||||
<div class="footer-logo"></div>
|
||||
</a>
|
||||
<div id="source-panel" class="hidden">
|
||||
<div id="source-tab">
|
||||
<ul class='nav nav-tabs' role='tablist'>
|
||||
<li class="active" id='hcode' role='presentation'><a id='htab' role='tab' aria-controls='html-tab' aria-selected='true'>Markup</a></li>
|
||||
<li id='tcode' role='presentation'><a id='ttab' role='tab' aria-controls='ts-tab'>Code</a></li>
|
||||
<li id='plnk'><a id='plnkr'>Open in Plunker</a></li>
|
||||
</ul>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class='footer' role="contentinfo">
|
||||
<div class="footer-left">
|
||||
<span>Copyright © 2001-2017 Syncfusion Inc.</span>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<a href="//www.syncfusion.com" target="_blank">
|
||||
<div class="footer-logo"></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="src/common/index.min.js" type="text/javascript"></script>
|
||||
<script src="src/common/index.min.js" type="text/javascript"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,24 +1,19 @@
|
|||
|
||||
// Karma configuration
|
||||
// Generated on Tue Apr 26 2016 09:56:05 GMT+0530 (India Standard Time)
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
|
||||
// base path that will be used to resolve all patterns (eg. files, exclude)
|
||||
basePath: '',
|
||||
|
||||
|
||||
// frameworks to use
|
||||
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
|
||||
frameworks: ['jasmine-ajax', 'jasmine', 'requirejs'],
|
||||
|
||||
proxies: {
|
||||
'/src/': '/base/src/',
|
||||
'/src/common': '/base/src/common',
|
||||
'/node_modules/': '/base/node_modules/',
|
||||
'/styles/': '/base/styles/'
|
||||
},
|
||||
|
||||
// list of files / patterns to load in the browser
|
||||
files: [
|
||||
"test-main.js",
|
||||
|
|
@ -30,63 +25,42 @@ module.exports = function (config) {
|
|||
{ pattern: 'node_modules/es6-promise/dist/es6-promise.js', included: false },
|
||||
{ pattern: "styles/index.css", included: true },
|
||||
{ pattern: "styles/material.css", included: false },
|
||||
{ pattern: "index.html", included: false }
|
||||
{ pattern: "index.html", included: false },
|
||||
],
|
||||
|
||||
|
||||
// list of files to exclude
|
||||
exclude: [
|
||||
],
|
||||
|
||||
|
||||
// preprocess matching files before serving them to the browser
|
||||
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
|
||||
preprocessors: {},
|
||||
|
||||
|
||||
// test results reporter to use
|
||||
// possible values: 'dots', 'progress'
|
||||
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
|
||||
reporters: ['dots', 'html'],
|
||||
|
||||
// the default html configuration
|
||||
htmlReporter: {
|
||||
outputFile: "test-report/units.html",
|
||||
pageTitle: "Unit Tests",
|
||||
subPageTitle: "Asampleprojectdescription"
|
||||
},
|
||||
|
||||
// web server port
|
||||
port: 9876,
|
||||
|
||||
|
||||
// enable / disable colors in the output (reporters and logs)
|
||||
colors: true,
|
||||
|
||||
|
||||
// level of logging
|
||||
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
|
||||
logLevel: config.LOG_INFO,
|
||||
|
||||
|
||||
// enable / disable watching file and executing tests whenever any file changes
|
||||
autoWatch: true,
|
||||
|
||||
|
||||
// start these browsers
|
||||
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
|
||||
browsers: ['PhantomJS', 'Chrome', 'Firefox'],
|
||||
|
||||
|
||||
// Continuous Integration mode
|
||||
// if true, Karma captures browsers, runs the tests and exits
|
||||
singleRun: false,
|
||||
|
||||
// Concurrency level
|
||||
// how many browser should be started simultaneous
|
||||
concurrency: Infinity,
|
||||
|
||||
|
||||
coverageReporter: {
|
||||
type: "html",
|
||||
check: {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"@syncfusion/ej2-inputs": "*",
|
||||
"@syncfusion/ej2-popups": "*",
|
||||
"@syncfusion/ej2-charts": "*",
|
||||
"@syncfusion/ej2-circulargauge": "*",
|
||||
"@syncfusion/ej2-navigations": "*",
|
||||
"cheerio": "^1.0.0-rc.1",
|
||||
"crossroads": "^0.12.2",
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { 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":"<html><head>\n <link href=\"http://ej2ci.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 </div>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n</div>\n\n<style>\n #wrapper {\n margin: 0 auto;\n }\n \n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n }\n \n .control_wrapper #container {\n min-height: 310px;\n }\n \n .e-bigger .control_wrapper #container {\n min-height: 400px;\n }\n \n .control_wrapper {\n max-width: 350px;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { 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":"<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 </div>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n</div>\n\n<style>\n #wrapper {\n margin: 0 auto;\n }\n \n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n }\n \n .control_wrapper #container {\n min-height: 310px;\n }\n \n .e-bigger .control_wrapper #container {\n min-height: 400px;\n }\n \n .control_wrapper {\n max-width: 350px;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { 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":"<html><head>\n <link href=\"http://ej2ci.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 </div>\n <span id=\"date_label\"> Selected Value: </span>\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 }\n \n .control_wrapper {\n max-width: 350px;\n margin: 0 auto;\n }\n \n .control_wrapper #container {\n min-height: 310px;\n }\n \n .e-bigger .control_wrapper #container {\n min-height: 400px;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { 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":"<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 </div>\n <span id=\"date_label\"> Selected Value: </span>\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 }\n \n .control_wrapper {\n max-width: 350px;\n margin: 0 auto;\n }\n \n .control_wrapper #container {\n min-height: 310px;\n }\n \n .e-bigger .control_wrapper #container {\n min-height: 400px;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { 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":"<html><head>\n <link href=\"http://ej2ci.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 </div>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n</div>\n\n<style>\n .control_wrapper #container {\n min-height: 310px;\n }\n \n .e-bigger .control_wrapper #container {\n min-height: 400px;\n }\n \n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n }\n \n .control_wrapper {\n max-width: 350px;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { 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":"<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 </div>\n <span id=\"date_label\"> Selected Value: </span>\n </div>\n</div>\n\n<style>\n .control_wrapper #container {\n min-height: 310px;\n }\n \n .e-bigger .control_wrapper #container {\n min-height: 400px;\n }\n \n #date_label {\n display: block;\n width: 248px;\n color: rgba(0, 0, 0, 0.58);\n }\n \n .control_wrapper {\n max-width: 350px;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, DateTime, AreaSeries, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Chart, DateTime, AreaSeries, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(AreaSeries, DateTime, Legend);
|
||||
|
||||
/**
|
||||
|
|
@ -66,7 +66,11 @@ this.default = (): void => {
|
|||
}
|
||||
],
|
||||
//Initializing Chart title
|
||||
title: 'Average Sales Comparison'
|
||||
title: 'Average Sales Comparison',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, BarSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';\nChart.Inject(BarSeries, Category, Legend, Tooltip);\n\n/**\n * Bar Series\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Food',\n interval: 1\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'In Billions',\n minimum: 0,\n maximum: 10,\n labelFormat: '{value}B',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'Fruit', y: 9.1 }, { x: 'Meat', y: 5.8 },\n { x: 'Cereals', y: 3.2 },\n { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },\n { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 },\n { x: 'Feed', y: 2.9 }, { x: 'Oils', y: 1.7 },\n { x: 'Sugar', y: 1.3 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Imports',\n },\n {\n type: 'Bar',\n dataSource: [\n { x: 'Fruit', y: 0.9 }, { x: 'Meat', y: 1.5 },\n { x: 'Cereals', y: 2.1 },\n { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },\n { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 },\n { x: 'Feed', y: 0.9 }, { x: 'Oils', y: 0.7 },\n { x: 'Sugar', y: 0.4 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Exports',\n }\n ],\n\n //Initializing Chart title\n title: 'UK Trade in Food Groups - 2015',\n tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' }\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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 style=\"float: right; margin-right: 10px; margin-top: -5px\">Source:\n <a href=\"https://www.gov.uk/\" target=\"_blank\">www.gov.uk</a>\n </div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(BarSeries, Category, Legend, Tooltip);\n\n/**\n * Bar Series\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Food',\n interval: 1\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'In Billions',\n minimum: 0,\n maximum: 10,\n labelFormat: '{value}B',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'Fruit', y: 9.1 }, { x: 'Meat', y: 5.8 },\n { x: 'Cereals', y: 3.2 },\n { x: 'Egg', y: 2.2 }, { x: 'Fish', y: 2.4 },\n { x: 'Misc', y: 3 }, { x: 'Tea', y: 3.1 },\n { x: 'Feed', y: 2.9 }, { x: 'Oils', y: 1.7 },\n { x: 'Sugar', y: 1.3 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Imports',\n },\n {\n type: 'Bar',\n dataSource: [\n { x: 'Fruit', y: 0.9 }, { x: 'Meat', y: 1.5 },\n { x: 'Cereals', y: 2.1 },\n { x: 'Egg', y: 1.2 }, { x: 'Fish', y: 1.3 },\n { x: 'Misc', y: 1.5 }, { x: 'Tea', y: 2.2 },\n { x: 'Feed', y: 0.9 }, { x: 'Oils', y: 0.7 },\n { x: 'Sugar', y: 0.4 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Exports',\n }\n ],\n\n //Initializing Chart title\n title: 'UK Trade in Food Groups - 2015',\n tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' },\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n","index.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 style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"https://www.gov.uk/\" target=\"_blank\">www.gov.uk</a>\n </div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top: -5px">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="https://www.gov.uk/" target='_blank'>www.gov.uk</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, BarSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, BarSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(BarSeries, Category, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -56,7 +56,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'UK Trade in Food Groups - 2015',
|
||||
tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' }
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -2,10 +2,17 @@ import { Chart, BubbleSeries, Tooltip, IPointRenderEventArgs } from '@syncfusion
|
|||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
Chart.Inject(BubbleSeries, Tooltip);
|
||||
|
||||
let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
|
||||
'#ea7a57', '#404041', '#00bdae' ];
|
||||
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 => {
|
||||
args.fill = seriesColor[args.point.index];
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
if (selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index];
|
||||
} else {
|
||||
args.fill = materialColors[args.point.index];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, BarSeries, Category, Legend, Tooltip, IPointRenderEventArgs } from '@syncfusion/ej2-charts';\nimport { EmitType } from '@syncfusion/ej2-base';\nChart.Inject(BarSeries, Category, Legend, Tooltip);\n\n/**\n * Category Axis\n */\nlet seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\nlet labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {\n args.fill = seriesColor[args.point.index];\n};\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Country',\n valueType: 'Category'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Users in Millions',\n minimum: 0,\n maximum: 800,\n labelFormat: '{value}M',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'GER', y: 71.7 },\n { x: 'RUS', y: 103.1 },\n { x: 'BRZ', y: 139.1 },\n { x: 'IND', y: 462.1 },\n { x: 'CHN', y: 721.4 },\n { x: 'USA', y: 286.9 },\n { x: 'GBR', y: 60.2 },\n { x: 'JPN', y: 115.1 },\n { x: 'NGR', y: 97.2 },\n ],\n xName: 'x', width: 2,\n yName: 'y',\n }\n ],\n pointRender: labelRender,\n //Initializing Chart title\n title: 'Internet Users – 2016',\n tooltip: { enable: true, format: '${point.x} : ${point.y}' }\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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 style=\"float: right; margin-right: 10px; margin-top:-5px;\">Source:\n <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n </div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, BarSeries, Category, Legend, Tooltip, IPointRenderEventArgs } from '@syncfusion/ej2-charts';\nimport { EmitType } from '@syncfusion/ej2-base';\nChart.Inject(BarSeries, Category, Legend, Tooltip);\n\n/**\n * Category Axis\n */\nlet materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\nlet fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];\nlet labelRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {\n let selectedTheme: string = location.hash.split('/')[1];\n if (selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index];\n } else {\n args.fill = materialColors[args.point.index];\n }\n};\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Country',\n valueType: 'Category'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Users in Millions',\n minimum: 0,\n maximum: 800,\n labelFormat: '{value}M',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Bar',\n dataSource: [\n { x: 'GER', y: 71.7 },\n { x: 'RUS', y: 103.1 },\n { x: 'BRZ', y: 139.1 },\n { x: 'IND', y: 462.1 },\n { x: 'CHN', y: 721.4 },\n { x: 'USA', y: 286.9 },\n { x: 'GBR', y: 60.2 },\n { x: 'JPN', y: 115.1 },\n { x: 'NGR', y: 97.2 },\n ],\n xName: 'x', width: 2,\n yName: 'y',\n }\n ],\n pointRender: labelRender,\n //Initializing Chart title\n title: 'Internet Users – 2016',\n tooltip: { enable: true, format: '${point.x} : ${point.y}' }\n });\n chart.appendTo('#container');\n","index.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 style=\"float: right; margin-right: 10px;\">Source:\n <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n </div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px;">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="http://www.internetworldstats.com/top20.htm" target="_blank">www.internetworldstats.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,17 @@ Chart.Inject(BarSeries, Category, Legend, Tooltip);
|
|||
/**
|
||||
* Category Axis
|
||||
*/
|
||||
let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
|
||||
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 => {
|
||||
args.fill = seriesColor[args.point.index];
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
if (selectedTheme.indexOf('fabric') > -1) {
|
||||
args.fill = fabricColors[args.point.index];
|
||||
} else {
|
||||
args.fill = materialColors[args.point.index];
|
||||
}
|
||||
};
|
||||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,28 @@
|
|||
<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>Club Value:
|
||||
<p id="clubvalue" style="font-weight: normal;">6</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="clubpoint" value="6" min="0" max="27" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to achieve club <code>clubpoint</code> using pie control.</p>
|
||||
<p> Points with value below the club value are grouped together and showed as separate point. You can customise the club point apearance using <code>'poinRender'</code> event.</p>
|
||||
<p> dataLabel are used to represent individual data and its value.</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccTextRenderEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { IAccPointRenderEventArgs, IAccLoadedEventArgs, AccumulationDataLabel } from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
|
||||
/**
|
||||
* Club Point
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ 'x': 'China', y: 26, text: 'China: 26' },
|
||||
{ 'x': 'Russia', y: 19, text: 'Russia: 19' },
|
||||
{ 'x': 'Germany', y: 17, text: 'Germany: 17' },
|
||||
{ 'x': 'Japan', y: 12, text: 'Japan: 12' },
|
||||
{ 'x': 'France', y: 10, text: 'France: 10' },
|
||||
{ 'x': 'South Korea', y: 9, text: 'South Korea: 9' },
|
||||
{ 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },
|
||||
{ 'x': 'Italy', y: 8, text: 'Italy: 8' },
|
||||
{ 'x': 'Australia', y: 8, text: 'Australia: 8' },
|
||||
{ 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },
|
||||
{ 'x': 'Hungary', y: 8, text: 'Hungary: 8' },
|
||||
{ 'x': 'Brazil', y: 7, text: 'Brazil: 7' },
|
||||
{ 'x': 'Spain', y: 7, text: 'Spain: 7' },
|
||||
{ 'x': 'Kenya', y: 6, text: 'Kenya: 6' },
|
||||
],
|
||||
animation: { enable: true },
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Outside',
|
||||
connectorStyle: { type: 'Line', length: '2%', color: 'transparent' },
|
||||
font: {
|
||||
size: '14px'
|
||||
}
|
||||
},
|
||||
radius: '70%',
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
groupTo: '6',
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
innerRadius: '0%',
|
||||
}
|
||||
],
|
||||
pointRender: (args: IAccPointRenderEventArgs) => {
|
||||
if ((args.point.x as string).indexOf('Others') > -1) {
|
||||
args.fill = '#D3D3D3';
|
||||
}
|
||||
},
|
||||
enableSmartLabels: true,
|
||||
legendSettings: {
|
||||
visible: false,
|
||||
},
|
||||
textRender: (args: IAccTextRenderEventArgs) => {
|
||||
args.text = args.point.x + ' ' + args.point.y + ' Medals';
|
||||
},
|
||||
tooltip: { enable: true, format: '${point.x} <br> ${point.y} Medals' },
|
||||
title: 'Rio Olympics Gold',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
function clubchange(value: number): void {
|
||||
pie.series[0].groupTo = value.toString();
|
||||
pie.series[0].animation.enable = false;
|
||||
document.getElementById('clubvalue').innerHTML = value.toString();
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('clubpoint').onpointermove = document.getElementById('clubpoint').ontouchmove =
|
||||
document.getElementById('clubpoint').onchange = (e: Event) => {
|
||||
clubchange(+(document.getElementById('clubpoint') as HTMLInputElement).value);
|
||||
};
|
||||
};
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, ColumnSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';\nChart.Inject(ColumnSeries, Category, Legend, Tooltip);\n\n/**\n * Column Series\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Countries',\n valueType: 'Category',\n interval: 1\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Medals',\n minimum: 0,\n maximum: 50,\n interval: 5\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }, { x: 'RUS', y: 19 },\n { x: 'GER', y: 17 }, { x: 'JAP', y: 12 }, { x: 'FRA', y: 10 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Gold',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }, { x: 'RUS', y: 17 },\n { x: 'GER', y: 10 }, { x: 'JAP', y: 8 }, { x: 'FRA', y: 18 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Silver',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }, { x: 'RUS', y: 19 },\n { x: 'GER', y: 15 }, { x: 'JAP', y: 21 }, { x: 'FRA', y: 14 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Bronze',\n }\n ],\n\n //Initializing Chart title\n title: 'Olympic Medals - RIO',\n tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' }\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, ColumnSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(ColumnSeries, Category, Legend, Tooltip);\n\n/**\n * Column Series\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Countries',\n valueType: 'Category',\n interval: 1\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Medals',\n minimum: 0,\n maximum: 50,\n interval: 5\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Column',\n dataSource: [\n { x: 'USA', y: 46 }, { x: 'GBR', y: 27 }, { x: 'CHN', y: 26 }, { x: 'RUS', y: 19 },\n { x: 'GER', y: 17 }, { x: 'JAP', y: 12 }, { x: 'FRA', y: 10 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Gold',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'USA', y: 37 }, { x: 'GBR', y: 23 }, { x: 'CHN', y: 18 }, { x: 'RUS', y: 17 },\n { x: 'GER', y: 10 }, { x: 'JAP', y: 8 }, { x: 'FRA', y: 18 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Silver',\n },\n {\n type: 'Column',\n dataSource: [\n { x: 'USA', y: 38 }, { x: 'GBR', y: 17 }, { x: 'CHN', y: 26 }, { x: 'RUS', y: 19 },\n { x: 'GER', y: 15 }, { x: 'JAP', y: 21 }, { x: 'FRA', y: 14 }\n ],\n xName: 'x', width: 2,\n yName: 'y', name: 'Bronze',\n }\n ],\n\n //Initializing Chart title\n title: 'Olympic Medals - RIO',\n tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' },\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n","index.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<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, ColumnSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, ColumnSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ColumnSeries, Category, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -56,7 +56,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Olympic Medals - RIO',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' }
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px;">Source:
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingColumnSeries, LineSeries, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
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);
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ this.default = (): void => {
|
|||
primaryXAxis: {
|
||||
title: 'Years',
|
||||
interval: 1,
|
||||
labelIntersectAction : 'Rotate45',
|
||||
labelIntersectAction: 'Rotate45',
|
||||
valueType: 'Category'
|
||||
},
|
||||
|
||||
|
|
@ -95,7 +95,11 @@ this.default = (): void => {
|
|||
//Initializing Chart title
|
||||
title: 'Annual Growth GDP in France',
|
||||
legendSettings: { visible: false },
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' }
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, LineSeries, Crosshair, DateTime, Legend } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DateTime, Crosshair, Legend);\n\n/**\n * Crosshair\n */\n\nlet series1: Object[] = [];\nlet series2: Object[] = [];\nlet point1: Object;\nlet point2: Object;\nlet value: number = 60;\nlet value1: number = 50;\nlet i: number;\nfor (i = 1; i < 250; i++) {\n\n if (Math.random() > .5) {\n value += Math.random();\n value1 += Math.random();\n } else {\n value -= Math.random();\n value1 -= Math.random();\n }\n point1 = { x: new Date(2000, i, 1), y: value };\n point2 = { x: new Date(2000, i, 1), y: value1 };\n series1.push(point1);\n series2.push(point2);\n}\n\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { width: 0 },\n valueType: 'DateTime',\n crosshairTooltip: { enable: true },\n labelFormat: 'yMMM'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n minimum: 10, maximum: 90, interval: 10,\n title: 'Temperature (°F)',\n rowIndex: 0,\n crosshairTooltip: {\n enable: true\n }\n },\n axes: [\n {\n majorGridLines: { width: 0 },\n rowIndex: 0,\n opposedPosition: true,\n minimum: 0, maximum: 160, interval: 20,\n name: 'yAxis',\n title: 'Rainfall (MM)',\n crosshairTooltip: { enable: true }\n }\n ],\n series: [\n {\n type: 'Line',\n dataSource: series1,\n border: { width: 1.5 },\n xName: 'x', width: 2,\n yName: 'y', name: 'Temperature',\n },\n {\n type: 'Line',\n dataSource: series2,\n name: 'Rainfall',\n yAxisName: 'yAxis',\n border: { width: 1.5 },\n xName: 'x', width: 2,\n yName: 'y',\n }\n ],\n crosshair: { enable: true },\n legendSettings: { visible: true },\n //Initializing Chart title\n title: 'Weather Condition'\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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\" style=\"width:92%\"></div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, LineSeries, Crosshair, DateTime, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DateTime, Crosshair, Legend);\n\n/**\n * Crosshair\n */\n\nlet series1: Object[] = [];\nlet series2: Object[] = [];\nlet point1: Object;\nlet point2: Object;\nlet value: number = 60;\nlet value1: number = 50;\nlet i: number;\nfor (i = 1; i < 250; i++) {\n\n if (Math.random() > .5) {\n value += Math.random();\n value1 += Math.random();\n } else {\n value -= Math.random();\n value1 -= Math.random();\n }\n point1 = { x: new Date(2000, i, 1), y: value };\n point2 = { x: new Date(2000, i, 1), y: value1 };\n series1.push(point1);\n series2.push(point2);\n}\n\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n majorGridLines: { width: 0 },\n valueType: 'DateTime',\n crosshairTooltip: { enable: true },\n labelFormat: 'yMMM'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n minimum: 10, maximum: 90, interval: 10,\n title: 'Temperature (°F)',\n rowIndex: 0,\n crosshairTooltip: {\n enable: true\n }\n },\n axes: [\n {\n majorGridLines: { width: 0 },\n rowIndex: 0,\n opposedPosition: true,\n minimum: 0, maximum: 160, interval: 20,\n name: 'yAxis',\n title: 'Rainfall (MM)',\n crosshairTooltip: { enable: true }\n }\n ],\n series: [\n {\n type: 'Line',\n dataSource: series1,\n border: { width: 1.5 },\n xName: 'x', width: 2,\n yName: 'y', name: 'Temperature',\n },\n {\n type: 'Line',\n dataSource: series2,\n name: 'Rainfall',\n yAxisName: 'yAxis',\n border: { width: 1.5 },\n xName: 'x', width: 2,\n yName: 'y',\n }\n ],\n crosshair: { enable: true },\n legendSettings: { visible: true },\n //Initializing Chart title\n title: 'Weather Condition',\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n","index.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\" style=\"width:92%\"></div>\n</div>\n\n<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, Crosshair, DateTime, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, Crosshair, DateTime, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Crosshair, Legend);
|
||||
|
||||
/**
|
||||
|
|
@ -80,7 +80,11 @@ this.default = (): void => {
|
|||
crosshair: { enable: true },
|
||||
legendSettings: { visible: true },
|
||||
//Initializing Chart title
|
||||
title: 'Weather Condition'
|
||||
title: 'Weather Condition',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px;">Source:
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, DateTime, Legend, Marker, DataLabel } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, DateTime, Legend, Marker, DataLabel, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Legend, Marker, DataLabel);
|
||||
|
||||
/**
|
||||
|
|
@ -65,7 +65,11 @@ this.default = (): void => {
|
|||
],
|
||||
|
||||
//Initializing Chart title
|
||||
title: 'Alaska Weather Statistics - 2016'
|
||||
title: 'Alaska Weather Statistics - 2016',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,7 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
</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>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
|
||||
IAccAnimationCompleteEventArgs, AccPoints, IAccTextRenderEventArgs, AccumulationSelection,
|
||||
IAccLoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationSelection);
|
||||
|
||||
/**
|
||||
* Doghnut Sample
|
||||
*/
|
||||
let centerTitle: HTMLDivElement = document.createElement('div') as HTMLDivElement;
|
||||
centerTitle.innerHTML = 'Expenses <br> Year   2013';
|
||||
centerTitle.style.position = 'absolute';
|
||||
centerTitle.style.visibility = 'hidden';
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
enableSmartLabels: true,
|
||||
selectionMode: 'Point',
|
||||
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': '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%',
|
||||
dataLabel: {
|
||||
visible: true, position: 'Inside',
|
||||
name: 'text',
|
||||
font: {
|
||||
color: 'white',
|
||||
fontWeight: 'Bold',
|
||||
size: '14px'
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
toggleVisibility: false,
|
||||
position: 'Right',
|
||||
height: '28%',
|
||||
width: '44%'
|
||||
},
|
||||
animationComplete: (args: IAccAnimationCompleteEventArgs) => {
|
||||
centerTitle.style.fontSize = getFontSize(args.pie.initialClipRect.width);
|
||||
let rect: ClientRect = centerTitle.getBoundingClientRect();
|
||||
centerTitle.style.top = (args.pie.center.y - rect.height / 2) + 'px';
|
||||
centerTitle.style.left = (args.pie.center.x - rect.width / 2) + 'px';
|
||||
centerTitle.style.visibility = 'visible';
|
||||
let points: AccPoints[] = args.pie.visibleSeries[0].points;
|
||||
for (let point of points) {
|
||||
if (point.labelPosition === 'Outside' && point.labelVisible) {
|
||||
let label: Element = document.getElementById('container_datalabel_Series_0_text_' + point.index);
|
||||
label.setAttribute('fill', 'black');
|
||||
}
|
||||
}
|
||||
},
|
||||
textRender: (args: IAccTextRenderEventArgs) => {
|
||||
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.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
document.getElementById('container').appendChild(centerTitle);
|
||||
function getFontSize(width: number): string {
|
||||
if (width > 300) {
|
||||
return '13px';
|
||||
} else if (width > 250) {
|
||||
return '8px';
|
||||
} else {
|
||||
return '6px';
|
||||
}
|
||||
}
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,75 @@
|
|||
<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>Pie Angle:
|
||||
<p id="anglevalue" style="font-weight: normal;">0</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="pieangle" value="0" min="0" max="360" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Outer Radius:
|
||||
<p id="radius" style="font-weight: normal;">0.8</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%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Explode Radius:
|
||||
<p id="exploderadius" style="font-weight: normal;">0.1</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="pieexploderadius" value="10" min="0" max="40" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>Explode Index:
|
||||
<p id="explodeindex" style="font-weight: normal;">5</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%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</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,101 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs,
|
||||
AccumulationDataLabel } from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
|
||||
/**
|
||||
* Pie Sample
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
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%' }
|
||||
],
|
||||
dataLabel: {
|
||||
visible: true,
|
||||
position: 'Outside', name: 'text',
|
||||
connectorStyle: { type: 'Curve', length: '10%' },
|
||||
font: {
|
||||
size: '14px'
|
||||
}
|
||||
},
|
||||
radius: '70%', xName: 'x',
|
||||
yName: 'y', startAngle: 0,
|
||||
endAngle: 360, innerRadius: '0%',
|
||||
explode: true, explodeOffset: '10%', explodeIndex: 5
|
||||
}
|
||||
],
|
||||
enableSmartLabels: true,
|
||||
legendSettings: {
|
||||
visible: false,
|
||||
},
|
||||
tooltip: { enable: true, format: '${point.x} <br> ${point.y} %' },
|
||||
title: 'Mobile Browser Statistics',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
function anglechange(value: number): void {
|
||||
pie.series[0].startAngle = +value;
|
||||
pie.series[0].endAngle = +value;
|
||||
document.getElementById('anglevalue').innerHTML = value.toString();
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('pieangle').onpointermove = document.getElementById('pieangle').ontouchmove =
|
||||
document.getElementById('pieangle').onchange = (e: Event) => {
|
||||
anglechange(+(document.getElementById('pieangle') as HTMLInputElement).value);
|
||||
};
|
||||
function radiuschange(value: number): void {
|
||||
pie.series[0].radius = value + '%';
|
||||
document.getElementById('radius').innerHTML = (value / 100).toFixed(2);
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('pieradius').onpointermove = document.getElementById('pieradius').ontouchmove =
|
||||
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);
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('pieexploderadius').onpointermove = document.getElementById('pieexploderadius').ontouchmove =
|
||||
document.getElementById('pieexploderadius').onchange = (e: Event) => {
|
||||
exploderadius(+(document.getElementById('pieexploderadius') as HTMLInputElement).value);
|
||||
};
|
||||
function explodeIndex(value: number): void {
|
||||
pie.visibleSeries[0].explodeIndex = +value;
|
||||
document.getElementById('explodeindex').innerHTML = value.toString();
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
}
|
||||
document.getElementById('pieexplodeindex').onpointermove = document.getElementById('pieexplodeindex').ontouchmove =
|
||||
document.getElementById('pieexplodeindex').onchange = (e: Event) => {
|
||||
explodeIndex(+(document.getElementById('pieexplodeindex') as HTMLInputElement).value);
|
||||
};
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,23 @@
|
|||
<div class="control-section">
|
||||
<div id="link">
|
||||
<a id="category" style="visibility:hidden; display:inline-block">
|
||||
Sales by Category
|
||||
</a>
|
||||
<p style="visibility:hidden; display:inline-block" id="symbol"> >> </p>
|
||||
<p id="text" style="display:inline-block;"></p>
|
||||
</div>
|
||||
<div id="container"></div>
|
||||
</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
|
||||
in terms of company.</p>
|
||||
<p> Legend and datalabel is used in this sample.</p>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p> Pie component features are segregated into individual feature-wise modules. To use legend, we need to inject Legend module using <code>AccumulationChart.Inject(AccumulationLegend)</code> method. </p>
|
||||
</div>
|
||||
<style>
|
||||
#category:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
import {
|
||||
AccumulationChart, AccumulationLegend, PieSeries, AccumulationTooltip, IAccLoadedEventArgs, IAccTextRenderEventArgs,
|
||||
chartMouseClick, IMouseEventArgs, Index, indexFinder, AccumulationDataLabel, AccumulationChartModel
|
||||
} from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationTooltip, AccumulationDataLabel);
|
||||
|
||||
/**
|
||||
* Drill down
|
||||
*/
|
||||
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) => {
|
||||
args.text = args.point.x + ' ' + args.point.y + ' %';
|
||||
},
|
||||
enableSmartLabels: true,
|
||||
tooltip: { enable: false, format: '${point.x} <br> ${point.y} %' },
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
};
|
||||
let pointClick: EmitType<IMouseEventArgs> = (args: IMouseEventArgs) => {
|
||||
let index: Index = indexFinder(args.target);
|
||||
if (document.getElementById(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;
|
||||
switch (index.point) {
|
||||
case 0:
|
||||
clickInstance.series[0].dataSource = suvs;
|
||||
clickInstance.title = 'Automobile Sales in the SUV segment';
|
||||
document.getElementById('text').innerHTML = 'SUV';
|
||||
break;
|
||||
case 1:
|
||||
clickInstance.series[0].dataSource = cars;
|
||||
clickInstance.title = 'Automobile Sales in the Car segment';
|
||||
document.getElementById('text').innerHTML = 'Car';
|
||||
break;
|
||||
case 2:
|
||||
clickInstance.series[0].dataSource = pickups;
|
||||
clickInstance.title = 'Automobile Sales in the Pickup segment';
|
||||
document.getElementById('text').innerHTML = 'Pickup';
|
||||
break;
|
||||
case 3:
|
||||
clickInstance.series[0].dataSource = minivans;
|
||||
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';
|
||||
}
|
||||
};
|
||||
let instance: AccumulationChartModel = {
|
||||
series: [
|
||||
{
|
||||
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' }
|
||||
},
|
||||
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 + ' %';
|
||||
},
|
||||
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.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
};
|
||||
let pie: AccumulationChart = new AccumulationChart(instance);
|
||||
pie.appendTo('#container');
|
||||
document.getElementById('category').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';
|
||||
};
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, Marker, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, Marker, DateTime, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Marker, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -89,7 +89,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Inflation - Consumer Price',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' }
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, Legend);
|
||||
|
||||
/**
|
||||
|
|
@ -81,7 +81,11 @@ this.default = (): void => {
|
|||
],
|
||||
|
||||
width: '800',
|
||||
height: '350'
|
||||
height: '350',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, LineSeries, DateTime, Legend } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DateTime, Legend);\n\n/**\n * Local data \n */\n\nlet series1: Object[] = [];\nlet series2: Object[] = [];\nlet point1: Object;\nlet point2: Object;\nlet value: number = 80;\nlet value1: number = 90;\nlet i: number;\nfor (i = 1; i < 500; i++) {\n\n if (Math.random() > .5) {\n value += Math.random();\n value1 += Math.random();\n } else {\n value -= Math.random();\n value1 -= Math.random();\n }\n point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };\n point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };\n series1.push(point1);\n series2.push(point2);\n}\n\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n majorGridLines: { width: 0 },\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Price ($)',\n labelFormat: '${value}',\n rangePadding: 'None'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: series1,\n xName: 'x', yName: 'y',\n width: 2, name: 'Product X',\n animation: { enable: true }\n },\n {\n type: 'Line',\n dataSource: series2,\n xName: 'x', yName: 'y',\n width: 2, name: 'Product Y',\n animation: { enable: true }\n }\n ],\n\n //Initializing Chart title\n title: 'Stock Price Analysis'\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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 id=\"container\"></div>\n</div>\n \n<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, LineSeries, DateTime, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DateTime, Legend);\n\n/**\n * Local data \n */\n\nlet series1: Object[] = [];\nlet series2: Object[] = [];\nlet point1: Object;\nlet point2: Object;\nlet value: number = 80;\nlet value1: number = 90;\nlet i: number;\nfor (i = 1; i < 500; i++) {\n\n if (Math.random() > .5) {\n value += Math.random();\n value1 += Math.random();\n } else {\n value -= Math.random();\n value1 -= Math.random();\n }\n point1 = { x: new Date(1960, (i + 1), i), y: Math.round(value) };\n point2 = { x: new Date(1960, (i + 1), i), y: Math.round(value1) };\n series1.push(point1);\n series2.push(point2);\n}\n\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n majorGridLines: { width: 0 },\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Price ($)',\n labelFormat: '${value}',\n rangePadding: 'None'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: series1,\n xName: 'x', yName: 'y',\n width: 2, name: 'Product X',\n animation: { enable: true }\n },\n {\n type: 'Line',\n dataSource: series2,\n xName: 'x', yName: 'y',\n width: 2, name: 'Product Y',\n animation: { enable: true }\n }\n ],\n\n //Initializing Chart title\n title: 'Stock Price Analysis',\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n","index.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 id=\"container\"></div>\n</div>\n \n<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, DateTime, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, DateTime, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Legend);
|
||||
|
||||
/**
|
||||
|
|
@ -65,7 +65,11 @@ this.default = (): void => {
|
|||
],
|
||||
|
||||
//Initializing Chart title
|
||||
title: 'Stock Price Analysis'
|
||||
title: 'Stock Price Analysis',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip);\n\n/**\n * Logarithmic Axis\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n labelFormat: 'y',\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n valueType: 'Logarithmic',\n edgeLabelPlacement: 'Shift',\n minorTicksPerInterval: 5,\n majorGridLines: { width: 1.5 },\n minorTickLines: { width: 0, height: 4 },\n minimum: 0,\n maximum: 100000,\n interval: 1,\n title: 'Profit ($)',\n labelFormat: '${value}'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: new Date(1995, 0, 1), y: 80 },\n { x: new Date(1996, 0, 1), y: 200 },\n { x: new Date(1997, 0, 1), y: 400 },\n { x: new Date(1998, 0, 1), y: 600 },\n { x: new Date(1999, 0, 1), y: 700 },\n { x: new Date(2000, 0, 1), y: 1400 },\n { x: new Date(2001, 0, 1), y: 2000 },\n { x: new Date(2002, 0, 1), y: 4000 },\n { x: new Date(2003, 0, 1), y: 6000 },\n { x: new Date(2004, 0, 1), y: 8000 },\n { x: new Date(2005, 0, 1), y: 11000 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product X',\n marker: {\n visible: true, height: 10, width: 10\n }\n }\n ],\n\n //Initializing Chart title\n title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },\n tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' }\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip);\n\n/**\n * Logarithmic Axis\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n title: 'Years',\n labelFormat: 'y',\n valueType: 'DateTime',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Primary Y Axis\n primaryYAxis:\n {\n valueType: 'Logarithmic',\n edgeLabelPlacement: 'Shift',\n minorTicksPerInterval: 5,\n majorGridLines: { width: 1.5 },\n minorTickLines: { width: 0, height: 4 },\n minimum: 0,\n maximum: 100000,\n interval: 1,\n title: 'Profit ($)',\n labelFormat: '${value}'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'Line',\n dataSource: [\n { x: new Date(1995, 0, 1), y: 80 },\n { x: new Date(1996, 0, 1), y: 200 },\n { x: new Date(1997, 0, 1), y: 400 },\n { x: new Date(1998, 0, 1), y: 600 },\n { x: new Date(1999, 0, 1), y: 700 },\n { x: new Date(2000, 0, 1), y: 1400 },\n { x: new Date(2001, 0, 1), y: 2000 },\n { x: new Date(2002, 0, 1), y: 4000 },\n { x: new Date(2003, 0, 1), y: 6000 },\n { x: new Date(2004, 0, 1), y: 8000 },\n { x: new Date(2005, 0, 1), y: 11000 }],\n xName: 'x', width: 2,\n yName: 'y', name: 'Product X',\n marker: {\n visible: true, height: 10, width: 10\n }\n }\n ],\n\n //Initializing Chart title\n title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },\n tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' },\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n","index.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<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, DateTime, Logarithmic, Legend, Marker, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -56,7 +56,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Product X Growth [1995-2005]', legendSettings: { visible: false },
|
||||
tooltip: { enable: true, format: '${series.name}<br> ${point.x} : ${point.y}' }
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, ColumnSeries, Marker, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, ColumnSeries, Marker, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, ColumnSeries, Category, Marker, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -67,7 +67,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Weather Condition',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}'}
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="http://www.espncricinfo.com/icc-world-twenty20-2016/engine/current/match/951373.html" target="_blank" target="_blank">www.espncricinfo.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, Legend, ILoadedEventArgs} from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { EmitType } from '@syncfusion/ej2-base';
|
||||
import { Button } from '@syncfusion/ej2-buttons';
|
||||
Chart.Inject(LineSeries, Legend);
|
||||
|
|
@ -26,7 +26,11 @@ this.default = (): void => {
|
|||
animation: { enable: false }
|
||||
}
|
||||
],
|
||||
legendSettings: { visible: false }
|
||||
legendSettings: { visible: false },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let button: Button = new Button({ cssClass: 'e-info', isPrimary: true });
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, RangeColumnSeries, Category, Tooltip } from '@syncfusion/ej2-charts';\nChart.Inject(RangeColumnSeries, Category, Tooltip);\n\n/**\n * RangeColumn series\n */\n\n\n let chart: Chart = new Chart({\n\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Months'\n },\n\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n edgeLabelPlacement: 'Shift',\n title: 'Temperature'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'RangeColumn', name: 'India', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 },\n { x: 'Mar', low: 1.9, high: 8.5 }, { x: 'Apr', low: 3.1, high: 10.8 },\n { x: 'May', low: 5.7, high: 14.4 }, { x: 'June', low: 8.4, high: 16.9 },\n { x: 'July', low: 10.6, high: 19.2 }, { x: 'Aug', low: 10.5, high: 18.9 },\n { x: 'Sep', low: 8.5, high: 16.1 }, { x: 'Oct', low: 6.0, high: 12.5 },\n { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }\n ],\n }, {\n type: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 },\n { x: 'Mar', low: 1.2, high: 7.5 }, { x: 'Apr', low: 2.5, high: 9.8 },\n { x: 'May', low: 4.7, high: 11.4 }, { x: 'June', low: 6.4, high: 14.4 },\n { x: 'July', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 },\n { x: 'Sep', low: 7.5, high: 15.1 }, { x: 'Oct', low: 3.0, high: 10.5 },\n { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }\n ]\n }\n ],\n tooltip: {\n enable: true,\n format: '${point.x}<br>High : ${point.high}<br>Low : ${point.low}'\n },\n title: 'Maximum and Minimum Temperature'\n });\n chart.appendTo('#container');\n\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, RangeColumnSeries, Category, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(RangeColumnSeries, Category, Tooltip);\n\n/**\n * RangeColumn series\n */\n\n\n let chart: Chart = new Chart({\n\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Months'\n },\n\n //Initializing Primary Y Axis\n primaryYAxis: {\n labelFormat: '{value}˚C',\n edgeLabelPlacement: 'Shift',\n title: 'Temperature'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'RangeColumn', name: 'India', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 },\n { x: 'Mar', low: 1.9, high: 8.5 }, { x: 'Apr', low: 3.1, high: 10.8 },\n { x: 'May', low: 5.7, high: 14.4 }, { x: 'June', low: 8.4, high: 16.9 },\n { x: 'July', low: 10.6, high: 19.2 }, { x: 'Aug', low: 10.5, high: 18.9 },\n { x: 'Sep', low: 8.5, high: 16.1 }, { x: 'Oct', low: 6.0, high: 12.5 },\n { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }\n ],\n }, {\n type: 'RangeColumn', name: 'Germany', xName: 'x', high: 'high', low: 'low',\n dataSource: [\n { x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 },\n { x: 'Mar', low: 1.2, high: 7.5 }, { x: 'Apr', low: 2.5, high: 9.8 },\n { x: 'May', low: 4.7, high: 11.4 }, { x: 'June', low: 6.4, high: 14.4 },\n { x: 'July', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 },\n { x: 'Sep', low: 7.5, high: 15.1 }, { x: 'Oct', low: 3.0, high: 10.5 },\n { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }\n ]\n }\n ],\n tooltip: {\n enable: true,\n format: '${point.x}<br>high: ${point.high}<br>low: ${point.low}'\n },\n title: 'Maximum and Minimum Temperature',\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n\n","index.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<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -3,9 +3,9 @@
|
|||
</div>
|
||||
<div id="description">
|
||||
<p>
|
||||
In this example, you can see how to render and configure the range column type series. RangeColumn type charts are used for data having two values in y-axis.
|
||||
Those can be represented by <code>high</code> and <code>low</code> properties,which represent start and end point of columns in chart. You can use <code>border</code>,
|
||||
<code>fill</code> properities to customize the data appearance.
|
||||
In this example, you can see how to render and configure the range column type chart You can use <code>border</code>,
|
||||
<code>fill</code> properties to customize the area. <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.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, RangeColumnSeries, Category, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, RangeColumnSeries, Category, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(RangeColumnSeries, Category, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -48,9 +48,13 @@ this.default = (): void => {
|
|||
],
|
||||
tooltip: {
|
||||
enable: true,
|
||||
format: '${point.x}<br>High : ${point.high}<br>Low : ${point.low}'
|
||||
format: '${point.x}<br>high: ${point.high}<br>low: ${point.low}'
|
||||
},
|
||||
title: 'Maximum and Minimum Temperature'
|
||||
title: 'Maximum and Minimum Temperature',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -22,12 +22,6 @@ let loadedChart: EmitType<Object> = (args: Chart): void => {
|
|||
this.default = (): void => {
|
||||
let chart: Chart = new Chart({
|
||||
|
||||
// Initializing Chart Area
|
||||
chartArea:
|
||||
{
|
||||
border: { width: 1 }
|
||||
},
|
||||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
rangePadding: 'Additional',
|
||||
|
|
@ -63,6 +57,8 @@ this.default = (): void => {
|
|||
div.style.top = (height ? height : 300 / 2 - 25) + 'px';
|
||||
div.style.left = (width / 2 - 25) + 'px';
|
||||
div.style.display = '';
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
},
|
||||
//Initializing Chart title
|
||||
title: 'Sprint Task Analysis', legendSettings: { visible: false },
|
||||
|
|
|
|||
|
|
@ -37,14 +37,12 @@
|
|||
{
|
||||
"url": "stacked-column100",
|
||||
"name": "100% Stacked Column",
|
||||
"category": "Series",
|
||||
"type": "new"
|
||||
"category": "Series"
|
||||
},
|
||||
{
|
||||
"url": "range-column",
|
||||
"name": "Range Column",
|
||||
"category": "Series",
|
||||
"type": "new"
|
||||
"category": "Series"
|
||||
},
|
||||
{
|
||||
"url": "stacked-bar",
|
||||
|
|
@ -55,8 +53,7 @@
|
|||
{
|
||||
"url": "stacked-bar100",
|
||||
"name": "100% Stacked Bar",
|
||||
"category": "Series",
|
||||
"type": "new"
|
||||
"category": "Series"
|
||||
},
|
||||
{
|
||||
"url": "stacked-area",
|
||||
|
|
@ -66,8 +63,7 @@
|
|||
{
|
||||
"url": "stacked-area100",
|
||||
"name": "100% Stacked Area",
|
||||
"category": "Series",
|
||||
"type": "new"
|
||||
"category": "Series"
|
||||
|
||||
},
|
||||
{
|
||||
|
|
@ -83,8 +79,7 @@
|
|||
{
|
||||
"url": "bubble",
|
||||
"name": "Bubble",
|
||||
"category": "Series",
|
||||
"type": "new"
|
||||
"category": "Series"
|
||||
},
|
||||
{
|
||||
"url": "combination-series",
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, ScatterSeries, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, ScatterSeries, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(ScatterSeries, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -78,7 +78,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Height Vs Weight', legendSettings: { visible: true },
|
||||
tooltip: { enable: true, format: '${series.name}<br>Height: ${point.x}<br>Weight: ${point.y}', enableAnimation : false }
|
||||
tooltip: { enable: true, format: '${series.name}<br>Height: ${point.x}<br>Weight: ${point.y}', enableAnimation : false },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,5 @@
|
|||
import { Chart, Selection, SelectionMode, ColumnSeries, Legend, Category, ScatterSeries, Marker } from '@syncfusion/ej2-charts';
|
||||
import { Chart, Selection, SelectionMode, ColumnSeries } from '@syncfusion/ej2-charts';
|
||||
import { Legend, Category, ScatterSeries, Marker, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(Selection, Legend, ColumnSeries, Category, ScatterSeries, Marker);
|
||||
|
||||
/**
|
||||
|
|
@ -67,6 +68,10 @@ this.default = (): void => {
|
|||
//Initializing Chart title
|
||||
title: 'Age Distribution by Country', legendSettings: { visible: true, toggleVisibility: false },
|
||||
selectionMode: 'Point',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
let previousType: SelectionMode = 'Point';
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,51 @@
|
|||
<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>Start Angle
|
||||
<p id="startangle" style="font-weight: normal;">270</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-min" id="range-min" value="270" min="0" max="360" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 30%">
|
||||
<div>End Angle
|
||||
<p id="endangle" style="font-weight: normal;">90</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 70%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-max" id="range-max" value="90" min="0" max="360" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="height: 50px">
|
||||
<td style="width: 40%">
|
||||
<div>Inner Radius
|
||||
<p id="innerradius" style="font-weight: normal;">0.40</p>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width: 60%;">
|
||||
<div data-role="rangeslider">
|
||||
<input type="range" name="range-max" id="inner-radius" value="40" min="0" max="50" style="width:90%">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to render semi pie and doughnut chart. Using <code>startAngle</code>, <code>endAngle</code> properties, we can achieve this semi pie chart. Property panel to change the angle is provided with this sample.</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,75 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip,
|
||||
IAccLoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel, AccumulationTooltip);
|
||||
|
||||
/**
|
||||
* Semi Pie sample
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ x: 'Australia', y: 53.3, text: 'Australia' },
|
||||
{ x: 'China', y: 55.7, text: 'China' },
|
||||
{ x: 'India', y: 60.5, text: 'India' },
|
||||
{ x: 'Japan', y: 12.5, text: 'Japan' },
|
||||
{ x: 'South Africa', y: 79.4, text: 'South Africa' },
|
||||
{ x: 'United Kingdom', y: 70.9, text: 'United Kingdom' },
|
||||
{ x: 'United States', y: 45.0, text: 'United States' }
|
||||
],
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
startAngle: 270,
|
||||
endAngle: 90,
|
||||
radius: '90%',
|
||||
innerRadius: '40%',
|
||||
dataLabel: {
|
||||
visible: true, position: 'Outside',
|
||||
connectorStyle: { length: '10%' }, name: 'text',
|
||||
font: { size: '14px'}
|
||||
},
|
||||
}
|
||||
],
|
||||
tooltip: { enable: true, format : '${point.x} : ${point.y}%' },
|
||||
legendSettings: {
|
||||
visible: false,
|
||||
},
|
||||
title: 'Agricultural land percentage',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
document.getElementById('inner-radius').onpointermove = document.getElementById('inner-radius').ontouchmove =
|
||||
document.getElementById('inner-radius').onchange = (e: Event) => {
|
||||
let innerradius: number = +(document.getElementById('inner-radius') as HTMLInputElement).value;
|
||||
pie.series[0].innerRadius = innerradius + '%';
|
||||
document.getElementById('innerradius').innerHTML = (innerradius / 100).toFixed(2);
|
||||
pie.series[0].animation.enable = false;
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
};
|
||||
document.getElementById('range-min').onpointermove = document.getElementById('range-min').ontouchmove =
|
||||
document.getElementById('range-min').onchange = (e: Event) => {
|
||||
let rangeMin: HTMLSelectElement = <HTMLSelectElement>(document.getElementById('range-min'));
|
||||
pie.series[0].startAngle = parseFloat(rangeMin.value);
|
||||
document.getElementById('startangle').innerHTML = rangeMin.value;
|
||||
pie.series[0].animation.enable = false;
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
};
|
||||
document.getElementById('range-max').onpointermove = document.getElementById('range-max').ontouchmove =
|
||||
document.getElementById('range-max').onchange = (e: Event) => {
|
||||
let rangeMax: HTMLSelectElement = <HTMLSelectElement>(document.getElementById('range-max'));
|
||||
pie.series[0].endAngle = parseFloat(rangeMax.value);
|
||||
document.getElementById('endangle').innerHTML = rangeMax.value;
|
||||
pie.series[0].animation.enable = false;
|
||||
pie.removeSvg();
|
||||
pie.refreshSeries();
|
||||
pie.refreshChart();
|
||||
};
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -0,0 +1,8 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div id="description">
|
||||
<p> In this example, you can see how to arrange the labels smartly without overlapping with each other. You can use <code>enableSmartLabels</code> property to enable or disable the action. Legend with paging is enabled in this sample.</p>
|
||||
<p style="font-weight: 500"> Injecting Module </p>
|
||||
<p> Pie component features are segregated into individual feature-wise modules. To use legend, we need to inject Legend module using <code>AccumulationChart.Inject(AccumulationLegend)</code> method.</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
import { AccumulationChart, AccumulationLegend, PieSeries, AccumulationDataLabel, IAccLoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
AccumulationChart.Inject(AccumulationLegend, PieSeries, AccumulationDataLabel);
|
||||
|
||||
/**
|
||||
* Smart labels for Pie sample
|
||||
*/
|
||||
this.default = (): void => {
|
||||
let pie: AccumulationChart = new AccumulationChart({
|
||||
series: [
|
||||
{
|
||||
dataSource: [
|
||||
{ 'x': 'China', y: 26, text: 'China: 26' },
|
||||
{ 'x': 'Russia', y: 19, text: 'Russia: 19' },
|
||||
{ 'x': 'Germany', y: 17, text: 'Germany: 17' },
|
||||
{ 'x': 'Japan', y: 12, text: 'Japan: 12' },
|
||||
{ 'x': 'France', y: 10, text: 'France: 10' },
|
||||
{ 'x': 'South Korea', y: 9, text: 'South Korea: 9' },
|
||||
{ 'x': 'Great Britain', y: 27, text: 'Great Britain: 27' },
|
||||
{ 'x': 'Italy', y: 8, text: 'Italy: 8' },
|
||||
{ 'x': 'Australia', y: 8, text: 'Australia: 8' },
|
||||
{ 'x': 'Netherlands', y: 8, text: 'Netherlands: 8' },
|
||||
{ 'x': 'Hungary', y: 8, text: 'Hungary: 8' },
|
||||
{ 'x': 'Brazil', y: 7, text: 'Brazil: 7' },
|
||||
{ 'x': 'Spain', y: 7, text: 'Spain: 7' },
|
||||
{ 'x': 'Kenya', y: 6, text: 'Kenya: 6' },
|
||||
{ 'x': 'Jamaica', y: 6, text: 'Jamaica: 6' },
|
||||
{ 'x': 'Croatia', y: 5, text: 'Croatia: 5' },
|
||||
{ 'x': 'Cuba', y: 5, text: 'Cuba: 5' },
|
||||
{ 'x': 'NewZealand', y: 4, text: 'New Zealand: 4' },
|
||||
{ 'x': 'Canada', y: 4, text: 'Canada: 4' },
|
||||
{ 'x': 'Uzbekistan', y: 4, text: 'Uzbekistan: 4' },
|
||||
{ 'x': 'Kazakhstan', y: 3, text: 'Kazakhstan: 3' },
|
||||
{ 'x': 'Colombia', y: 3, text: 'Colombia: 3' },
|
||||
{ 'x': 'Switzerland', y: 3, text: 'Switzerland: 3' },
|
||||
{ 'x': 'Iran', y: 3, text: 'Iran: 3' },
|
||||
{ 'x': 'Greece', y: 3, text: 'Greece: 3' },
|
||||
{ 'x': 'Argentina', y: 3, text: 'Argentina: 3' },
|
||||
{ 'x': 'Denmark', y: 2, text: 'Denmark: 2' },
|
||||
{ 'x': 'Sweden', y: 2, text: 'Sweden: 2' },
|
||||
{ 'x': 'South Africa', y: 2, text: 'South Africa: 2' },
|
||||
{ 'x': 'Ukraine', y: 2, text: 'Ukraine: 2' },
|
||||
{ 'x': 'Serbia', y: 2, text: 'Serbia: 2' },
|
||||
{ 'x': 'Poland', y: 2, text: 'Poland: 2' },
|
||||
{ 'x': 'North Korea', y: 2, text: 'North Korea: 2' },
|
||||
{ 'x': 'Belgium', y: 2, text: 'Belgium: 2' },
|
||||
{ 'x': 'Thailand', y: 2, text: 'Thailand: 2' },
|
||||
{ 'x': 'Slovakia', y: 2, text: 'Slovakia`: 2' }
|
||||
],
|
||||
xName: 'x',
|
||||
yName: 'y',
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
innerRadius: '0%',
|
||||
dataLabel: {
|
||||
visible: true, position: 'Outside',
|
||||
border : { width: 1, color: 'black'},
|
||||
connectorStyle: { length: '10%' }, name: 'text',
|
||||
},
|
||||
}
|
||||
],
|
||||
legendSettings: {
|
||||
visible: true,
|
||||
position: 'Right',
|
||||
border: { width: 1, color: 'black' },
|
||||
height: '70%',
|
||||
width: '12%'
|
||||
},
|
||||
title: 'Rio Olympics Gold',
|
||||
load: (args: IAccLoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.pie.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
if (args.pie.availableSize.width < 400) {
|
||||
args.pie.legendSettings.visible = false;
|
||||
} else {
|
||||
args.pie.legendSettings.visible = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
pie.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px;">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="https://www.worldweatheronline.com/mooresville-weather/north-carolina/us.aspx" target="_blank">www.worldweatheronline.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, SplineSeries, Marker, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, SplineSeries, Marker, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(SplineSeries, Category, Marker, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -85,7 +85,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'NC Weather Report - 2016',
|
||||
tooltip: { enable: true, format: '${series.name} (°c)<br>${point.x} : ${point.y}' }
|
||||
tooltip: { enable: true, format: '${series.name} (°c)<br>${point.x} : ${point.y}' },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top: -5px">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="https://www.gov.uk/" target="_blank">www.gov.uk</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingAreaSeries, Legend, DateTime } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StackingAreaSeries, Legend, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingAreaSeries, Legend, DateTime);
|
||||
|
||||
/**
|
||||
|
|
@ -90,7 +90,11 @@ this.default = (): void => {
|
|||
],
|
||||
|
||||
//Initializing Chart title
|
||||
title: 'Trend in Sales of Ethical Produce'
|
||||
title: 'Trend in Sales of Ethical Produce',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingAreaSeries, DateTime } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StackingAreaSeries, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingAreaSeries, DateTime);
|
||||
let chartData: any[] = [
|
||||
{ x: new Date(2000, 0, 1), y: 0.61, y1: 0.03, y2: 0.48, y3: 0.23 },
|
||||
|
|
@ -52,6 +52,10 @@ this.default = (): void => {
|
|||
type: 'StackingArea100', name: 'Others',
|
||||
}
|
||||
],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
},
|
||||
title: 'Trend in Sales of Ethical Produce'
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, StackingBarSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';\nChart.Inject(StackingBarSeries, Category, Legend, Tooltip);\n\n/**\n * Stacked-Bar Series\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Months'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Percentage (%)',\n minimum: -20,\n maximum: 100,\n labelFormat: '{value}%',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 12 }, { x: 'Apr', y: 15.5 },\n { x: 'May', y: 20 }, { x: 'Jun', y: 24 }, { x: 'Jul', y: 28 }, { x: 'Aug', y: 32 },\n { x: 'Sep', y: 33 }, { x: 'Oct', y: 35 }, { x: 'Nov', y: 40 }, { x: 'Dec', y: 42 }],\n name: 'Apple',\n xName: 'x', width: 2,\n yName: 'y'\n },\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 11 }, { x: 'Apr', y: 16 },\n { x: 'May', y: 21 }, { x: 'Jun', y: 25 }, { x: 'Jul', y: 27 }, { x: 'Aug', y: 31 },\n { x: 'Sep', y: 34 }, { x: 'Oct', y: 34 }, { x: 'Nov', y: 41 }, { x: 'Dec', y: 42 }],\n name: 'Orange',\n xName: 'x', width: 2,\n yName: 'y'\n },\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1.5 }, { x: 'Mar', y: -2 }, { x: 'Apr', y: -2.5 },\n { x: 'May', y: -3 }, { x: 'Jun', y: -3.5 }, { x: 'Jul', y: -4 }, { x: 'Aug', y: -4.5 },\n { x: 'Sep', y: -5 }, { x: 'Oct', y: -5.5 }, { x: 'Nov', y: -6 }, { x: 'Dec', y: -6.5 }],\n name: 'Wastage', width: 2,\n xName: 'x',\n yName: 'y'\n\n }\n ],\n\n //Initializing Chart title\n title: 'Sales Comparison',\n tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}'}\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, StackingBarSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(StackingBarSeries, Category, Legend, Tooltip);\n\n/**\n * Stacked-Bar Series\n */\n\n let chart: Chart = new Chart({\n\n //Initializing Primary X Axis\n primaryXAxis: {\n valueType: 'Category',\n title: 'Months'\n },\n\n //Initializing Primary Y Axis\t\n primaryYAxis:\n {\n title: 'Percentage (%)',\n minimum: -20,\n maximum: 100,\n labelFormat: '{value}%',\n edgeLabelPlacement: 'Shift'\n },\n\n //Initializing Chart Series\n series: [\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 12 }, { x: 'Apr', y: 15.5 },\n { x: 'May', y: 20 }, { x: 'Jun', y: 24 }, { x: 'Jul', y: 28 }, { x: 'Aug', y: 32 },\n { x: 'Sep', y: 33 }, { x: 'Oct', y: 35 }, { x: 'Nov', y: 40 }, { x: 'Dec', y: 42 }],\n name: 'Apple',\n xName: 'x', width: 2,\n yName: 'y'\n },\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: 6 }, { x: 'Feb', y: 8 }, { x: 'Mar', y: 11 }, { x: 'Apr', y: 16 },\n { x: 'May', y: 21 }, { x: 'Jun', y: 25 }, { x: 'Jul', y: 27 }, { x: 'Aug', y: 31 },\n { x: 'Sep', y: 34 }, { x: 'Oct', y: 34 }, { x: 'Nov', y: 41 }, { x: 'Dec', y: 42 }],\n name: 'Orange',\n xName: 'x', width: 2,\n yName: 'y'\n },\n {\n type: 'StackingBar',\n dataSource: [{ x: 'Jan', y: -1 }, { x: 'Feb', y: -1.5 }, { x: 'Mar', y: -2 }, { x: 'Apr', y: -2.5 },\n { x: 'May', y: -3 }, { x: 'Jun', y: -3.5 }, { x: 'Jul', y: -4 }, { x: 'Aug', y: -4.5 },\n { x: 'Sep', y: -5 }, { x: 'Oct', y: -5.5 }, { x: 'Nov', y: -6 }, { x: 'Dec', y: -6.5 }],\n name: 'Wastage', width: 2,\n xName: 'x',\n yName: 'y'\n\n }\n ],\n\n //Initializing Chart title\n title: 'Sales Comparison',\n tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}'},\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n }\n });\n chart.appendTo('#container');\n","index.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<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<br>
|
||||
<p style="font-weight: 500">Injecting Module</p>
|
||||
<p>
|
||||
Chart component features are segregated into individual feature-wise modules. To use stacking bar series, we need to inject
|
||||
Chart component features are segregated into individual feature-wise modules. To use stacking area series, we need to inject
|
||||
<code>StackingBarSeries</code> module using <code>Chart.Inject(StackingBarSeries)</code> method.
|
||||
</p>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingBarSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StackingBarSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingBarSeries, Category, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -57,7 +57,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Sales Comparison',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}'}
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, StackingBarSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-charts';\nChart.Inject(StackingBarSeries, Category, Tooltip, Legend);\nlet chartData: any[] = [\n { x: 'Jan', y: 6, y1: 6, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },\n { x: 'Mar', y: 12, y1: 11, y2: 2 }, { x: 'Apr', y: 15, y1: 16, y2: 2.5 },\n { x: 'May', y: 20, y1: 21, y2: 3 }, { x: 'Jun', y: 24, y1: 25, y2: 3.5 },\n { x: 'Jul', y: 28, y1: 27, y2: 4 }, { x: 'Aug', y: 32, y1: 31, y2: 4.5 },\n { x: 'Sep', y: 33, y1: 34, y2: 5 }, { x: 'Oct', y: 35, y1: 34, y2: 5.5 },\n { x: 'Nov', y: 40, y1: 41, y2: 6 }, { x: 'Dec', y: 42, y1: 42, y2: 6.5 }\n];\n\n/**\n * StackingBar100 series\n */\n\n let chart: Chart = new Chart({\n primaryXAxis: {\n title: 'Months',\n valueType: 'Category',\n edgeLabelPlacement: 'Shift',\n },\n primaryYAxis:\n {\n title: 'Percentage (%)',\n edgeLabelPlacement: 'Shift'\n },\n series: [\n {\n //Series type as 100% stacked bar\n type: 'StackingBar100',\n name: 'Apple',\n dataSource: chartData, xName: 'x', yName: 'y'\n }, {\n type: 'StackingBar100', name: 'Orange',\n dataSource: chartData, xName: 'x', yName: 'y1'\n }, {\n type: 'StackingBar100', name: 'Wastage',\n dataSource: chartData, xName: 'x', yName: 'y2'\n }\n ],\n title: 'Sales Comparison',\n tooltip: { enable: true, format: '${point.x} <br>${series.name} : ${point.y} (${point.percent}%)' }\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, StackingBarSeries, Category, Tooltip, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(StackingBarSeries, Category, Tooltip, Legend);\nlet chartData: any[] = [\n { x: 'Jan', y: 6, y1: 6, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },\n { x: 'Mar', y: 12, y1: 11, y2: 2 }, { x: 'Apr', y: 15, y1: 16, y2: 2.5 },\n { x: 'May', y: 20, y1: 21, y2: 3 }, { x: 'Jun', y: 24, y1: 25, y2: 3.5 },\n { x: 'Jul', y: 28, y1: 27, y2: 4 }, { x: 'Aug', y: 32, y1: 31, y2: 4.5 },\n { x: 'Sep', y: 33, y1: 34, y2: 5 }, { x: 'Oct', y: 35, y1: 34, y2: 5.5 },\n { x: 'Nov', y: 40, y1: 41, y2: 6 }, { x: 'Dec', y: 42, y1: 42, y2: 6.5 }\n];\n\n/**\n * StackingBar100 series\n */\n\n let chart: Chart = new Chart({\n primaryXAxis: {\n title: 'Months',\n valueType: 'Category',\n edgeLabelPlacement: 'Shift',\n },\n primaryYAxis:\n {\n title: 'Percentage (%)',\n edgeLabelPlacement: 'Shift'\n },\n series: [\n {\n //Series type as 100% stacked bar\n type: 'StackingBar100',\n name: 'Apple',\n dataSource: chartData, xName: 'x', yName: 'y'\n }, {\n type: 'StackingBar100', name: 'Orange',\n dataSource: chartData, xName: 'x', yName: 'y1'\n }, {\n type: 'StackingBar100', name: 'Wastage',\n dataSource: chartData, xName: 'x', yName: 'y2'\n }\n ],\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n },\n title: 'Sales Comparison',\n tooltip: { enable: true, format: '${point.x} <br>${series.name} : ${point.y} (${point.percent}%)' }\n });\n chart.appendTo('#container');\n","index.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<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingBarSeries, Category, Tooltip, Legend } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StackingBarSeries, Category, Tooltip, Legend, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingBarSeries, Category, Tooltip, Legend);
|
||||
let chartData: any[] = [
|
||||
{ x: 'Jan', y: 6, y1: 6, y2: 1 }, { x: 'Feb', y: 8, y1: 8, y2: 1.5 },
|
||||
|
|
@ -38,6 +38,10 @@ this.default = (): void => {
|
|||
dataSource: chartData, xName: 'x', yName: 'y2'
|
||||
}
|
||||
],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
},
|
||||
title: 'Sales Comparison',
|
||||
tooltip: { enable: true, format: '${point.x} <br>${series.name} : ${point.y} (${point.percent}%)' }
|
||||
});
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px;">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="https://www.cyberagent.co.jp/en/newsinfo/press/detail/id=12026" target="_blank">www.cyberagent.co.jp</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingColumnSeries, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StackingColumnSeries, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingColumnSeries, Category, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -90,7 +90,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Mobile Game Market by Country',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}' }
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"index.ts":"import { Chart, StackingColumnSeries, Category, Tooltip } from '@syncfusion/ej2-charts';\nChart.Inject(StackingColumnSeries, Category, Tooltip);\nlet chartData: any[] = [\n { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },\n { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },\n { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },\n { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },\n { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },\n { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },\n { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },\n];\n\n/**\n * StackingColumn100\n */\n\n let chart: Chart = new Chart({\n primaryXAxis: {\n title: 'Years',\n valueType: 'Category',\n labelIntersectAction: 'Rotate45'\n },\n primaryYAxis:\n {\n title: 'GDP (%) Per Annum',\n rangePadding: 'None',\n },\n series: [\n {\n dataSource: chartData, xName: 'x', yName: 'y',\n type: 'StackingColumn100',\n name: 'UK',\n }, {\n dataSource: chartData, xName: 'x', yName: 'y1',\n type: 'StackingColumn100', name: 'Germany',\n }, {\n dataSource: chartData, xName: 'x', yName: 'y2',\n type: 'StackingColumn100', name: 'France',\n\n }, {\n dataSource: chartData, xName: 'x', yName: 'y3',\n type: 'StackingColumn100', name: 'Italy',\n\n }\n ],\n title: 'Gross Domestic Product Growth',\n tooltip: { enable: true, format: '${point.x} <br>${series.name} : ${point.y} (${point.percent}%)' }\n });\n chart.appendTo('#container');\n","index.html":"<html><head>\n <link href=\"http://ej2ci.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<style>\n #control-container {\n padding: 0px !important;\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://ej2ci.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-data\": \"syncfusion:ej2-data/dist/ej2-data.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-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\", \n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
{"index.ts":"import { Chart, StackingColumnSeries, Category, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';\nChart.Inject(StackingColumnSeries, Category, Tooltip);\nlet chartData: any[] = [\n { x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },\n { x: '2007', y: 544, y1: 226, y2: 145, y3: 120 },\n { x: '2008', y: 880, y1: 194, y2: 190, y3: 115 },\n { x: '2009', y: 675, y1: 250, y2: 220, y3: 125 },\n { x: '2010', y: 765, y1: 222, y2: 225, y3: 132 },\n { x: '2011', y: 679, y1: 181, y2: 135, y3: 137 },\n { x: '2012', y: 770, y1: 128, y2: 152, y3: 110 },\n];\n\n/**\n * StackingColumn100\n */\n\n let chart: Chart = new Chart({\n primaryXAxis: {\n title: 'Years',\n valueType: 'Category',\n labelIntersectAction: 'Rotate45'\n },\n primaryYAxis:\n {\n title: 'GDP (%) Per Annum',\n rangePadding: 'None',\n },\n series: [\n {\n dataSource: chartData, xName: 'x', yName: 'y',\n type: 'StackingColumn100',\n name: 'UK',\n }, {\n dataSource: chartData, xName: 'x', yName: 'y1',\n type: 'StackingColumn100', name: 'Germany',\n }, {\n dataSource: chartData, xName: 'x', yName: 'y2',\n type: 'StackingColumn100', name: 'France',\n\n }, {\n dataSource: chartData, xName: 'x', yName: 'y3',\n type: 'StackingColumn100', name: 'Italy',\n\n }\n ],\n load: (args: ILoadedEventArgs) => {\n let selectedTheme: string = location.hash.split('/')[1];\n args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';\n },\n title: 'Gross Domestic Product Growth',\n tooltip: { enable: true, format: '${point.x} <br>${series.name} : ${point.y} (${point.percent}%)' }\n });\n chart.appendTo('#container');\n","index.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<style>\n #control-container {\n padding: 0px !important;\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-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 },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StackingColumnSeries, Category, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StackingColumnSeries, Category, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StackingColumnSeries, Category, Tooltip);
|
||||
let chartData: any[] = [
|
||||
{ x: '2006', y: 900, y1: 190, y2: 250, y3: 150 },
|
||||
|
|
@ -43,6 +43,10 @@ this.default = (): void => {
|
|||
|
||||
}
|
||||
],
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
},
|
||||
title: 'Gross Domestic Product Growth',
|
||||
tooltip: { enable: true, format: '${point.x} <br>${series.name} : ${point.y} (${point.percent}%)' }
|
||||
});
|
||||
|
|
|
|||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, StepLineSeries, Marker, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, StepLineSeries, Marker, DateTime, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(StepLineSeries, Marker, DateTime, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -91,7 +91,11 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Chart title
|
||||
title: 'Unemployment Rates 1975-2010',
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.x} : ${point.y}'}
|
||||
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.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,6 +1,6 @@
|
|||
<div class="control-section">
|
||||
<div id="container"></div>
|
||||
<div style="float: right; margin-right: 10px; margin-top:-5px">Source:
|
||||
<div style="float: right; margin-right: 10px;">Source:
|
||||
<a href="http://www.marketingprofs.com/charts/2012/7064/facebook-stats-five-years-of-worldwide-growth" target="_blank">www.marketingprofs.com</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Chart, LineSeries, Marker, Category, Legend, Tooltip } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, Marker, Category, Legend, Tooltip, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(LineSeries, Category, Marker, Legend, Tooltip);
|
||||
|
||||
/**
|
||||
|
|
@ -9,19 +9,15 @@ this.default = (): void => {
|
|||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis: {
|
||||
title: 'Countries',
|
||||
valueType: 'Category',
|
||||
interval: 1,
|
||||
labelIntersectAction : 'Rotate45'
|
||||
title: 'Countries', valueType: 'Category',
|
||||
interval: 1, labelIntersectAction: 'Rotate45'
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: 'Penetration (%)',
|
||||
rangePadding: 'None',
|
||||
labelFormat: '{value}%',
|
||||
minimum: 0,
|
||||
title: 'Penetration (%)', rangePadding: 'None',
|
||||
labelFormat: '{value}%', minimum: 0,
|
||||
maximum: 90
|
||||
},
|
||||
//Initializing Chart Series
|
||||
|
|
@ -36,10 +32,8 @@ this.default = (): void => {
|
|||
{ x: 'NA', y: 25.3, text: 'North America' }],
|
||||
name: 'December 2007',
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10, height: 10,
|
||||
shape: 'Diamond',
|
||||
dataLabel: { name: 'text' }
|
||||
visible: true, width: 10, height: 10,
|
||||
shape: 'Diamond', dataLabel: { name: 'text' }
|
||||
},
|
||||
xName: 'x', width: 2,
|
||||
yName: 'y',
|
||||
|
|
@ -54,10 +48,8 @@ this.default = (): void => {
|
|||
{ x: 'NA', y: 35.9, text: 'North America' }],
|
||||
xName: 'x', width: 2,
|
||||
marker: {
|
||||
visible: true,
|
||||
width: 10, height: 10,
|
||||
shape: 'Pentagon',
|
||||
dataLabel: { name: 'text' }
|
||||
visible: true, width: 10, height: 10,
|
||||
shape: 'Pentagon', dataLabel: { name: 'text' }
|
||||
},
|
||||
yName: 'y', name: 'December 2008',
|
||||
},
|
||||
|
|
@ -99,7 +91,11 @@ this.default = (): void => {
|
|||
//Initializing Chart title
|
||||
title: 'FB Penetration of Internet Audience',
|
||||
legendSettings: { visible: false },
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.text} : ${point.y}' }
|
||||
tooltip: { enable: true, format: '${series.name}<br>${point.text} : ${point.y}' },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Marker, Tooltip, Crosshair, DateTime } from '@syncfusion/ej2-charts';
|
||||
import { Marker, Tooltip, Crosshair, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Chart, LineSeries, Legend } from '@syncfusion/ej2-charts';
|
||||
import { john, andrew, thomas, mark, william } from './trackball-data';
|
||||
Chart.Inject(LineSeries, DateTime, Tooltip, Crosshair, Marker, Legend);
|
||||
|
|
@ -76,7 +76,11 @@ this.default = (): void => {
|
|||
tooltip: { enable: true, shared: true, format: '${series.name} : ${point.x} : ${point.y}' },
|
||||
crosshair: { enable: true, lineType: 'Vertical' },
|
||||
//Initializing Chart title
|
||||
title: 'Average Sales per Person'
|
||||
title: 'Average Sales per Person',
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
|
|
@ -1,4 +1,4 @@
|
|||
import { Marker, DateTime } from '@syncfusion/ej2-charts';
|
||||
import { Marker, DateTime, ILoadedEventArgs } from '@syncfusion/ej2-charts';
|
||||
import { Chart, AreaSeries, Legend, Zoom } from '@syncfusion/ej2-charts';
|
||||
Chart.Inject(AreaSeries, DateTime, Marker, Legend, Zoom);
|
||||
|
||||
|
|
@ -64,6 +64,10 @@ this.default = (): void => {
|
|||
//Initializing Chart title
|
||||
title: 'Sales History of Product X',
|
||||
legendSettings: { visible: false },
|
||||
load: (args: ILoadedEventArgs) => {
|
||||
let selectedTheme: string = location.hash.split('/')[1];
|
||||
args.chart.theme = selectedTheme.indexOf('fabric') > -1 ? 'Fabric' : 'Material';
|
||||
}
|
||||
});
|
||||
chart.appendTo('#container');
|
||||
};
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
/**
|
||||
* Annotations
|
||||
*/
|
||||
import { CircularGauge } from '@syncfusion/ej2-circulargauge';
|
||||
import { Annotations } from '@syncfusion/ej2-circulargauge';
|
||||
CircularGauge.Inject(Annotations);
|
||||
|
||||
export function gauge1(): CircularGauge {
|
||||
let gauge1: CircularGauge = new CircularGauge({
|
||||
centerY: '45%',
|
||||
resized: (args: object) => {
|
||||
location.reload();
|
||||
},
|
||||
titleStyle: { color: 'black', size: '16px' },
|
||||
axes: [
|
||||
{
|
||||
startAngle: 0, endAngle: 0,
|
||||
lineStyle: { width: 0 }, radius: '70%',
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 3,
|
||||
color: 'rgba(29,29,29,0.6)'
|
||||
}, {
|
||||
start: 3, end: 12,
|
||||
color: 'rgba(226, 226, 226, 0.6)'
|
||||
}
|
||||
],
|
||||
annotations: [{
|
||||
angle: 270, radius: '50%', zIndex: '1',
|
||||
content: '<div id="minutes" style="width:75px;height:75px;"></div>'
|
||||
}, {
|
||||
angle: 180, radius: '50%', zIndex: '1',
|
||||
content: '<div id="seconds" style="width:75px;height:75px;"></div>'
|
||||
}, {
|
||||
angle: 90, zIndex: '1',
|
||||
radius: '40%',
|
||||
content: '<div id="hr" style="background-color:rgba(29,29,29,0.6); color:white;font-size:12px;">11:11 AM</div>'
|
||||
}, {
|
||||
angle: 360, radius: '50%', zIndex: '1',
|
||||
content: '<div id="tm" style="font-size:10px;">21-06-17</div>'
|
||||
}],
|
||||
labelStyle: {
|
||||
hiddenLabel: 'First', font: { color: 'rgb(29,29,29)' }, autoAngle: false
|
||||
}, majorTicks: {
|
||||
width: 2, height: 14, interval: 1, color: 'rgb(29,29,29)'
|
||||
}, minorTicks: {
|
||||
height: 4, width: 1, interval: 0.2, color: 'rgb(29,29,29)'
|
||||
},
|
||||
minimum: 0, maximum: 12,
|
||||
pointers: [{
|
||||
pointerWidth: 5, radius: '40%', color: 'rgba(29,29,29,0.8)',
|
||||
border: { width: 0, color: '#679EEF' },
|
||||
cap: { radius: 0, border: { width: 0, color: 'red' } },
|
||||
needleTail: { length: '0%' }, animation: { enable: false }
|
||||
}, {
|
||||
radius: '60%', pointerWidth: 5, color: 'rgba(29,29,29,0.8)',
|
||||
border: {
|
||||
width: 0,
|
||||
color: 'rgba(29,29,29,0.8)'
|
||||
},
|
||||
cap: {
|
||||
color: 'rgba(29,29,29,0.8)',
|
||||
radius: 0,
|
||||
border: {
|
||||
width: 0,
|
||||
color: 'red'
|
||||
}
|
||||
|
||||
},
|
||||
needleTail: {
|
||||
length: '0%'
|
||||
}, animation: {
|
||||
enable: false
|
||||
}
|
||||
}, {
|
||||
radius: '70%',
|
||||
pointerWidth: 1,
|
||||
color: 'rgba(29,29,29,0.8)',
|
||||
cap: {
|
||||
color: 'white',
|
||||
radius: 4,
|
||||
border: {
|
||||
width: 2,
|
||||
color: 'rgba(29,29,29,0.8)'
|
||||
}
|
||||
},
|
||||
border: {
|
||||
width: 2,
|
||||
color: 'rgba(29,29,29,0.8)'
|
||||
},
|
||||
needleTail: {
|
||||
color: 'rgba(29,29,29,0.8)',
|
||||
length: '20%',
|
||||
border: {
|
||||
width: 2,
|
||||
color: 'rgba(29,29,29,0.8)'
|
||||
},
|
||||
}, animation: {
|
||||
enable: false,
|
||||
duration: 500
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
return gauge1;
|
||||
}
|
||||
export function gauge2(): CircularGauge {
|
||||
let gauge2: CircularGauge = new CircularGauge({
|
||||
titleStyle: { color: 'black' },
|
||||
axes: [
|
||||
{
|
||||
startAngle: 0, endAngle: 0,
|
||||
lineStyle: { width: 0 },
|
||||
ranges: [
|
||||
{
|
||||
start: 0, end: 3,
|
||||
startWidth: 4, endWidth: 4,
|
||||
color: 'rgba(29,29,29,0.4)'
|
||||
}, {
|
||||
start: 3, end: 12,
|
||||
startWidth: 4, endWidth: 4,
|
||||
color: 'rgba(168,145,102,0.1)'
|
||||
}
|
||||
],
|
||||
annotations: [{
|
||||
angle: 270,
|
||||
radius: '40%',
|
||||
content: null
|
||||
}, {
|
||||
angle: 180,
|
||||
radius: '40%',
|
||||
content: null
|
||||
}, {
|
||||
angle: 90,
|
||||
radius: '50%',
|
||||
content: null
|
||||
}, {
|
||||
angle: 360, zIndex: '1',
|
||||
radius: '35%',
|
||||
content: '<div id="tm" style="font-size:10px;">21-06-17</div>'
|
||||
}],
|
||||
labelStyle: {
|
||||
hiddenLabel: 'First',
|
||||
font: {
|
||||
color: '#8c8c8c',
|
||||
size: '0px'
|
||||
},
|
||||
autoAngle: false
|
||||
}, majorTicks: {
|
||||
width: 1,
|
||||
height: 5,
|
||||
interval: 1
|
||||
}, minorTicks: {
|
||||
height: 3,
|
||||
width: 0.5,
|
||||
interval: 0.2
|
||||
},
|
||||
minimum: 0,
|
||||
maximum: 12,
|
||||
pointers: [{
|
||||
radius: '70%',
|
||||
pointerWidth: 2,
|
||||
color: 'rgba(29,29,29,1)',
|
||||
cap: {
|
||||
color: 'rgba(29,29,29,1)',
|
||||
radius: 2,
|
||||
border: {
|
||||
width: 0.2,
|
||||
color: 'rgba(168,145,102,1)'
|
||||
}
|
||||
},
|
||||
needleTail: {
|
||||
color: 'rgba(168,145,102,1)',
|
||||
length: '10%'
|
||||
}, animation: {
|
||||
enable: false,
|
||||
duration: 500
|
||||
}
|
||||
}]
|
||||
}
|
||||
]
|
||||
});
|
||||
return gauge2;
|
||||
}
|
||||
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче