Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Chart annotations in Vue Chart component

    13 Jun 202424 minutes to read

    Annotations are used to mark the specific area of interest in the chart area with texts, shapes or images.

    You can add annotations to the chart by using theannotations option. By using thecontent option of annotation object, you can specify
    the id of the element that needs to be displayed in the chart area.

    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><scriptsetup>import{provide}from"vue";import{ChartComponentasEjsChart,SeriesCollectionDirectiveasESeriesCollection,SeriesDirectiveasESeries,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";constseriesData=[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}];constannotations=[{content:'70 Gold Medals',coordinateUnits:'Point',x:'France',y:50}];constprimaryXAxis={valueType:'Category',title:'Countries'};constprimaryYAxis={minimum:0,maximum:80,interval:20,title:'Medals'};consttitle="Olympic Medals";provide('chart',[ColumnSeries,Category,ChartAnnotation]);</script><style>#container{height:350px;}</style>
    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><script>import{ChartComponent,SeriesCollectionDirective,SeriesDirective,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";exportdefault{name:"App",components:{'ejs-chart':ChartComponent,'e-series-collection':SeriesCollectionDirective,'e-series':SeriesDirective},data(){return{seriesData:[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}],annotations:[{content:'70 Gold Medals',coordinateUnits:'Point',x:'France',y:50}],primaryXAxis:{valueType:'Category',title:'Countries'},primaryYAxis:{minimum:0,maximum:80,interval:20,title:'Medals'},title:"Olympic Medals"};},provide:{chart:[ColumnSeries,Category,ChartAnnotation]},};</script><style>#container{height:350px;}</style>

    Note: To use annotation feature in chart, we need to injectChartAnnotation into theprovide.

    Region

    Annotations can be placed either with respect toSeries orChart. by default, it will placed with respect
    toChart.

    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><scriptsetup>import{provide,createApp}from"vue";import{ChartComponentasEjsChart,SeriesCollectionDirectiveasESeriesCollection,SeriesDirectiveasESeries,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Highest Medal Count</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};constseriesData=[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}];constannotations=[{content:contentTemplate,region:'Series',coordinateUnits:'Point',x:'France',y:50}];constprimaryXAxis={valueType:'Category',title:'Countries'};constprimaryYAxis={minimum:0,maximum:80,interval:20,title:'Medals'};consttitle="Olympic Medals";provide('chart',[ColumnSeries,Category,ChartAnnotation]);</script><style>#container{height:350px;}</style>
    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><script>import{ChartComponent,SeriesCollectionDirective,SeriesDirective,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";import{createApp}from"vue";constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Highest Medal Count</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};exportdefault{name:"App",components:{'ejs-chart':ChartComponent,'e-series-collection':SeriesCollectionDirective,'e-series':SeriesDirective},data(){return{seriesData:[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}],annotations:[{content:contentTemplate,region:'Series',coordinateUnits:'Point',x:'France',y:50}],primaryXAxis:{valueType:'Category',title:'Countries'},primaryYAxis:{minimum:0,maximum:80,interval:20,title:'Medals'},title:"Olympic Medals"};},provide:{chart:[ColumnSeries,Category,ChartAnnotation]},};</script><style>#container{height:350px;}</style>

    Co-ordinate Units

    Specified the coordinates units of the annotation eitherPixel orPoint.

    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><scriptsetup>import{provide,createApp}from"vue";import{ChartComponentasEjsChart,SeriesCollectionDirectiveasESeriesCollection,SeriesDirectiveasESeries,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";constapp=createApp()letcontentVue=app.component("contentTemplate",{template:'<div>Annotation in Pixel</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};constseriesData=[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}];constannotations=[{content:contentTemplate,coordinateUnits:'Pixel',x:150,y:50}];constprimaryXAxis={valueType:'Category',title:'Countries'};constprimaryYAxis={minimum:0,maximum:80,interval:20,title:'Medals'};consttitle="Olympic Medals";provide('chart',[ColumnSeries,Category,ChartAnnotation]);</script><style>#container{height:350px;}</style>
    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><script>import{ChartComponent,SeriesCollectionDirective,SeriesDirective,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";import{createApp}from'vue';constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Annotation in Pixel</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};exportdefault{name:"App",components:{'ejs-chart':ChartComponent,'e-series-collection':SeriesCollectionDirective,'e-series':SeriesDirective},data(){return{seriesData:[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}],annotations:[{content:contentTemplate,coordinateUnits:'Pixel',x:150,y:50}],primaryXAxis:{valueType:'Category',title:'Countries'},primaryYAxis:{minimum:0,maximum:80,interval:20,title:'Medals'},title:"Olympic Medals"};},provide:{chart:[ColumnSeries,Category,ChartAnnotation]},};</script><style>#container{height:350px;}</style>

    Alignment

    Annotation providesverticalAlignment andhorizontalAlignment. TheverticalAlignment can be customized
    viaTop,Bottom orMiddle and thehorizontalAlignment can be customized viaNear,Far orCenter.

    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><scriptsetup>import{provide,createApp}from"vue";import{ChartComponentasEjsChart,SeriesCollectionDirectiveasESeriesCollection,SeriesDirectiveasESeries,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Highest Medal Count</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};constseriesData=[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}];constannotations=[{content:contentTemplate,x:'France',y:50,verticalAlignment:'Top',horizontalAlignment:'Near'}];constprimaryXAxis={valueType:'Category',title:'Countries'};constprimaryYAxis={minimum:0,maximum:80,interval:20,title:'Medals'};consttitle="Olympic Medals";provide('chart',[ColumnSeries,Category,ChartAnnotation]);</script><style>#container{height:350px;}</style>
    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><script>import{ChartComponent,SeriesCollectionDirective,SeriesDirective,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";import{createApp}from'vue';constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Highest Medal Count</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};exportdefault{name:"App",components:{'ejs-chart':ChartComponent,'e-series-collection':SeriesCollectionDirective,'e-series':SeriesDirective},data(){return{seriesData:[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}],annotations:[{content:contentTemplate,x:'France',y:50,verticalAlignment:'Top',horizontalAlignment:'Near'}],primaryXAxis:{valueType:'Category',title:'Countries'},primaryYAxis:{minimum:0,maximum:80,interval:20,title:'Medals'},title:"Olympic Medals"};},provide:{chart:[ColumnSeries,Category,ChartAnnotation]},};</script><style>#container{height:350px;}</style>

    Adding y-axis sub title through on annotation

    By setting text div in thecontent option of annotation object you can add sub title to chart y-axis. Specified thecoordinate value aspixel and customize x and y location of the text.

    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><scriptsetup>import{provide,createApp}from"vue";import{ChartComponentasEjsChart,SeriesCollectionDirectiveasESeriesCollection,SeriesDirectiveasESeries,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Speed Rate</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};constseriesData=[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}];constannotations=[{content:contentTemplate,coordinateUnits:'Pixel',x:13,y:180,region:'Chart'}];constprimaryXAxis={valueType:'Category',title:'Countries'};constprimaryYAxis={minimum:0,maximum:80,interval:20,title:'(m2/min)'};consttitle="Olympic Medals";provide('chart',[ColumnSeries,Category,ChartAnnotation]);</script><style>#container{height:350px;}</style>
    <template><divid="app"><ejs-chartid="container":title='title':primaryXAxis='primaryXAxis':primaryYAxis='primaryYAxis':annotations='annotations'><e-series-collection><e-series:dataSource='seriesData'type='Column'xName='country'yName='gold'name='Gold'></e-series></e-series-collection></ejs-chart></div></template><script>import{ChartComponent,SeriesCollectionDirective,SeriesDirective,ColumnSeries,Category,ChartAnnotation}from"@syncfusion/ej2-vue-charts";import{createApp}from'vue';constapp=createApp();letcontentVue=app.component("contentTemplate",{template:'<div>Speed Rate</div>',data(){return{data:{}};}});letcontentTemplate=function(){return{template:contentVue};};exportdefault{name:"App",components:{'ejs-chart':ChartComponent,'e-series-collection':SeriesCollectionDirective,'e-series':SeriesDirective},data(){return{seriesData:[{country:"USA",gold:50},{country:"China",gold:40},{country:"Japan",gold:70},{country:"Australia",gold:60},{country:"France",gold:50},{country:"Germany",gold:40},{country:"Italy",gold:40},{country:"Sweden",gold:30}],annotations:[{content:contentTemplate,coordinateUnits:'Pixel',x:13,y:180,region:'Chart'}],primaryXAxis:{valueType:'Category',title:'Countries'},primaryYAxis:{minimum:0,maximum:80,interval:20,title:'(m2/min)'},title:"Olympic Medals"};},provide:{chart:[ColumnSeries,Category,ChartAnnotation]},};</script><style>#container{height:350px;}</style>

    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