Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Getting started in EJ2 TypeScript Smithchart control

    7 May 202524 minutes to read

    This section explains how to create a Smith Chart and configure its available functionalities in TypeScript using Essential® JS 2quickstart seed repository.

    This application is integrated with thewebpack.config.js configuration and uses the latest version of thewebpack-cli. It requires nodev14.15.0 or higher. For more information about webpack and its features, refer to thewebpack documentation.

    Dependencies

    Below is the list of minimum dependencies required to use the Smith Chart.

    |--@syncfusion/ej2-charts|--@syncfusion/ej2-base|--@syncfusion/ej2-data|--@syncfusion/ej2-svg-base|--@syncfusion/ej2-pdf-export|--@syncfusion/ej2-compression|--@syncfusion/ej2-file-utils

    Set up development environment

    Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project fromGitHub.

    git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart

    After cloning the application in theej2-quickstart folder, run the following command line to navigate to theej2-quickstart folder.

    cd ej2-quickstart

    Add Syncfusion® JavaScript packages

    Syncfusion® JavaScript (Essential® JS 2) packages are available on thenpmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single@syncfusion/ej2 package or individual packages for each control.

    The quickstart application is preconfigured with the dependent@syncfusion/ej2 package in the~/package.json file. Use the following command to install the dependent npm packages from the command prompt.

    npm install

    Add Smith Chart to the Project

    Add the HTML div element for Smith Chart into yourindex.html.[src/index.html]

    <!DOCTYPE html><htmllang="en"><head><title>EJ2 Animation</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Typescript UI Controls"/><metaname="author"content="Syncfusion"/></head><body><!--container which is going to render the Smith Chart--><divid='container'></div></body></html>

    Now import the Smithchart component into yourindex.ts to instantiate a smithchart and append the smithchart instance to the#container

    import{Smithchart}from'@syncfusion/ej2-charts';// initialize Smithchart componentletsmithchart:Smithchart=newSmithchart();// render initialized Smithchartsmithchart.appendTo('#container');

    Now use thenpm run start command to run the application in the browser.

    npm run start

    The below example shows a basic Smithchart.

    import{Smithchart}from'@syncfusion/ej2-charts';letsmithchart:Smithchart=newSmithchart();smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Module Injection

    Smithchart component are segregated into individual feature-wise modules. In order to use a particular feature,you need to inject its feature module usingSmithchart.Inject() method. In the current application, we are
    going to modify the above basic smithchart to visualize transmission lines.
    For this application we are going to use tooltip and legend feature of the smithchart. Please find relevant
    feature module name and description as follows.

    • SmithchartLegend - Inject this provider to use legend feature.
    • TooltipRender - Inject this provider to use tooltip feature.

    Now import the above mentioned modules from smithchart package and inject it into the Smithchart component using
    Smithchart.Inject method.

    import{Smithchart,SmithchartLegend,TooltipRender}from'@syncfusion/ej2-charts';Smithchart.Inject(SmithchartLegend,TooltipRender);

    Add Series to Smithchart

    Smithchart had two type of specification for adding series.

    • dataSource - Using this, Data object can bind directly by specifying the resistance and reactance values, series add to smithchart.
    • points - Using this, collection of resistance and reactance values can bind directly to render series.

    Below sample demonstrate adding two series to smithchart both ways.

    • First series Transmission1 shows dataSource bound series.
    • Second series Transmission2 shows points bound series.
    import{Smithchart}from'@syncfusion/ej2-charts';letsmithchart:Smithchart=newSmithchart({series:[{dataSource:[{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0.3,reactance:0.1},{resistance:0.5,reactance:0.2},{resistance:1.5,reactance:0.5},{resistance:2.0,reactance:0.5},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:4.5,reactance:-0.5},{resistance:5.0,reactance:-1.0}],name:'Transmission1',reactance:'reactance',resistance:'resistance'},{points:[{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.5,reactance:0.4},{resistance:1.0,reactance:0.8},{resistance:2.5,reactance:1.3},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:4.5,reactance:2.0},{resistance:6.0,reactance:4.5},{resistance:8,reactance:6},{resistance:10,reactance:25}],name:'Transmission2'}]});smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Add title to SmithChart

    smithcharttitle API used to add title for smithchart. In thattext API used to set text of the title.
    APIvisible used to toggle the title.

    import{Smithchart}from'@syncfusion/ej2-charts';letsmithchart:Smithchart=newSmithchart({title:{text:'Transmission lines applied for both impedance and admittance'},series:[{dataSource:[{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0.3,reactance:0.1},{resistance:0.5,reactance:0.2},{resistance:1.5,reactance:0.5},{resistance:2.0,reactance:0.5},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:4.5,reactance:-0.5},{resistance:5.0,reactance:-1.0}],name:'Transmission1',reactance:'reactance',resistance:'resistance'},{points:[{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.5,reactance:0.4},{resistance:1.0,reactance:0.8},{resistance:2.5,reactance:1.3},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:4.5,reactance:2.0},{resistance:6.0,reactance:4.5},{resistance:8,reactance:6},{resistance:10,reactance:25}],name:'Transmission2'}]});smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Enable Marker to Smithchart

    To use series marker and it’s customization in smithchart, use seriesmarker. To display marker for particular series, need to specifymarker visible as true. Below sample marker enabled for first series only.

    import{Smithchart}from'@syncfusion/ej2-charts';letsmithchart:Smithchart=newSmithchart({title:{text:'Transmission lines applied for both impedance and admittance'},series:[{dataSource:[{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0.3,reactance:0.1},{resistance:0.5,reactance:0.2},{resistance:1.5,reactance:0.5},{resistance:2.0,reactance:0.5},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:4.5,reactance:-0.5},{resistance:5.0,reactance:-1.0}],name:'Transmission1',reactance:'reactance',resistance:'resistance',marker:{visible:true}},{points:[{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.5,reactance:0.4},{resistance:1.0,reactance:0.8},{resistance:2.5,reactance:1.3},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:4.5,reactance:2.0},{resistance:6.0,reactance:4.5},{resistance:8,reactance:6},{resistance:10,reactance:25}],name:'Transmission2'}]});smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Enable DataLabel to Smithchart Marker

    To use marker dataLabel and it’s customization in smithchart, use markerdataLabel. To display dataLabel for particular series marker, need to specifydataLabel visible as true in that seriesmarker. Below sample dataLabel enabled for first series.

    import{Smithchart}from'@syncfusion/ej2-charts';letsmithchart:Smithchart=newSmithchart({title:{text:'Transmission lines applied for both impedance and admittance'},series:[{dataSource:[{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0.3,reactance:0.1},{resistance:0.5,reactance:0.2},{resistance:1.5,reactance:0.5},{resistance:2.0,reactance:0.5},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:4.5,reactance:-0.5},{resistance:5.0,reactance:-1.0}],name:'Transmission1',reactance:'reactance',resistance:'resistance',marker:{visible:true,dataLabel:{visible:true}}},{points:[{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.5,reactance:0.4},{resistance:1.0,reactance:0.8},{resistance:2.5,reactance:1.3},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:4.5,reactance:2.0},{resistance:6.0,reactance:4.5},{resistance:8,reactance:6},{resistance:10,reactance:25}],name:'Transmission2'}]});smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Enable Legend for Smithchart

    Smithchart had a legend feature, which is used to denote the correspond series. To enable the legend, need to injectSmithchartLegend module usingSmithchart.Inject(SmithchartLegend) method and smithchartlegendSettingsvisible as true. Following example sample shows enabling legend for smithchart. Series name can customize using seriesname.

    import{Smithchart,SmithchartLegend}from'@syncfusion/ej2-charts';Smithchart.Inject(SmithchartLegend);letsmithchart:Smithchart=newSmithchart({title:{text:'Transmission lines applied for both impedance and admittance'},legendSettings:{visible:true},series:[{dataSource:[{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0.3,reactance:0.1},{resistance:0.5,reactance:0.2},{resistance:1.5,reactance:0.5},{resistance:2.0,reactance:0.5},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:4.5,reactance:-0.5},{resistance:5.0,reactance:-1.0}],name:'Transmission1',reactance:'reactance',resistance:'resistance',marker:{visible:true,dataLabel:{visible:true}}},{points:[{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.5,reactance:0.4},{resistance:1.0,reactance:0.8},{resistance:2.5,reactance:1.3},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:4.5,reactance:2.0},{resistance:6.0,reactance:4.5},{resistance:8,reactance:6},{resistance:10,reactance:25}],name:'Transmission2'}]});smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Enable Tooltip for Smithchart Series

    Smithchart had a tooltip feature, which is used to show the current point’s values. To enable the tooltip, need to injectTooltipRender module usingSmithchart.Inject(TooltipRender) method and smithchart seriestooltipvisible as true. Following example sample shows enabling tooltip for smithchart series collection.

    import{Smithchart,SmithchartLegend,TooltipRender}from'@syncfusion/ej2-charts';Smithchart.Inject(SmithchartLegend,TooltipRender);letsmithchart:Smithchart=newSmithchart({title:{text:'Transmission lines applied for both impedance and admittance'},legendSettings:{visible:true},series:[{dataSource:[{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0,reactance:0.05},{resistance:0.3,reactance:0.1},{resistance:0.5,reactance:0.2},{resistance:1.5,reactance:0.5},{resistance:2.0,reactance:0.5},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:2.5,reactance:0.4},{resistance:3.5,reactance:0.0},{resistance:4.5,reactance:-0.5},{resistance:5.0,reactance:-1.0}],name:'Transmission1',reactance:'reactance',resistance:'resistance',tooltip:{visible:true},marker:{visible:true,dataLabel:{visible:true}}},{points:[{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0,reactance:0.15},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.3,reactance:0.2},{resistance:0.5,reactance:0.4},{resistance:1.0,reactance:0.8},{resistance:2.5,reactance:1.3},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:3.5,reactance:1.6},{resistance:4.5,reactance:2.0},{resistance:6.0,reactance:4.5},{resistance:8,reactance:6},{resistance:10,reactance:25}],name:'Transmission2',tooltip:{visible:true}}]});smithchart.appendTo('#container');
    <!DOCTYPE html><htmllang="en"><head><title>Essential JS 2 for Smith chart</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for Smithchart UI Control"/><metaname="author"content="Syncfusion"/><linkhref="index.css"rel="stylesheet"/><linkhref="https://cdn.syncfusion.com/ej2/31.2.2/ej2-charts/styles/material.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script><scriptsrc="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"type="text/javascript"></script></head><body><divid='loader'>Loading....</div><divid='container'></div></body></html>

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2025 Movatter.jp