Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Appearance in Vue HeatMap chart component

    13 Jun 202424 minutes to read

    Cell customization

    You can customize the cell by using thecellSettings property.

    Border

    Change the width, color, and radius of the heat map cells by using theborder property.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':cellSettings='cellSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};constcellSettings={border:{width:1,radius:4,color:'white'}};provide('heatmap',[Tooltip,Legend])</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':cellSettings='cellSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']},cellSettings:{border:{width:1,radius:4,color:'white'}}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Cell highlighting

    Enable or disable the cell highlighting while hovering over the heat map cells by using theenableCellHighlighting property.

    Note: The cell highlighting only works in a SVG rendering mode.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':cellSettings='cellSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constcellSettings={enableCellHighlighting:true};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']}provide('heatmap',[Tooltip,Legend])</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':cellSettings='cellSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},cellSettings:{enableCellHighlighting:true},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Color gradient mode

    ThecolorGradientMode property can be used to set the minimum and maximum values for colors based on row and column.

    Three types of color gradient modes are available.

    • Table: The minimum and maximum value colors calculated for overall data.
    • Row: The minimum and maximum value colors calculated for each row of data.
    • Column: The minimum and maximum value colors calculated for each column of data.

    Note: The default value ofcolorGradientMode isTable.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':cellSettings='cellSettings':paletteSettings='paletteSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constcellSettings={enableCellHighlighting:true};constpaletteSettings={colorGradientMode:'Column'};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};provide('heatmap',[Tooltip,Legend])</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':cellSettings='cellSettings':paletteSettings='paletteSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},cellSettings:{enableCellHighlighting:true},paletteSettings:{colorGradientMode:'Column'},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Background color

    The background color of the HeatMap can be customized using thebackgroundColor property.

    <template><divid="app"><ejs-heatmapid="heatmap":backgroundColor="backgroundColor":titleSettings="titleSettings":xAxis="xAxis":yAxis="yAxis":dataSource="dataSource"></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap}from"@syncfusion/ej2-vue-heatmap";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];constbackgroundColor="#c7afcf";consttitleSettings={text:"Sales Revenue per Employee (in 1000 US$)",textStyle:{size:"15px",fontWeight:"500",fontStyle:"Normal",fontFamily:"Segoe UI"}};constxAxis={labels:["Nancy","Andrew","Janet","Margaret","Steven","Michael","Robert","Laura","Anne","Paul","Karin","Mario"]};constyAxis={labels:["Mon","Tues","Wed","Thurs","Fri","Sat"]};</script>
    <template><divid="app"><ejs-heatmapid="heatmap":backgroundColor="backgroundColor":titleSettings="titleSettings":xAxis="xAxis":yAxis="yAxis":dataSource="dataSource"></ejs-heatmap></div></template><script>import{HeatMapComponent}from"@syncfusion/ej2-vue-heatmap";exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],backgroundColor:"#c7afcf",titleSettings:{text:"Sales Revenue per Employee (in 1000 US$)",textStyle:{size:"15px",fontWeight:"500",fontStyle:"Normal",fontFamily:"Segoe UI"}},xAxis:{labels:["Nancy","Andrew","Janet","Margaret","Steven","Michael","Robert","Laura","Anne","Paul","Karin","Mario"]},yAxis:{labels:["Mon","Tues","Wed","Thurs","Fri","Sat"]}};}};</script>

    Margin

    Set the margin for the HeatMap from its container by using themargin property.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':margin='margin':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};constmargin={left:15,right:15,top:15,bottom:15};provide('heatmap',[Tooltip,Legend])</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':margin='margin':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']},margin:{left:15,right:15,top:15,bottom:15}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Title

    The title is used to provide a quick information about the data plotted in heatmap. Thetext property is used to set the title for the heatmap. The text style of the title can be customized by using thetextStyle property.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Italic',fontFamily:'Segoe UI'}};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};provide('heatmap',[Tooltip,Legend])</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Italic',fontFamily:'Segoe UI'}},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Data label

    The visibility of data labels can be toggled using theshowLabel property. By default, the data labels will be visible.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};constcellSettings={showLabel:false};provide('heatmap',[Tooltip,Legend])</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']},cellSettings:{showLabel:false}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Customize the data label

    The label displayed in the HeatMap cell can be changed using thecellRender event.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings="titleSettings":xAxis="xAxis":yAxis="yAxis":dataSource="dataSource":cellRender="cellRender"></ejs-heatmap></div></template><scriptsetup>import{provide}from"vue";import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from"@syncfusion/ej2-vue-heatmap";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:"Sales Revenue per Employee (in 1000 US$)",textStyle:{size:"15px",fontWeight:"500",fontStyle:"Normal",fontFamily:"Segoe UI"}};constxAxis={labels:["Nancy","Andrew","Janet","Margaret","Steven","Michael","Robert","Laura","Anne","Paul","Karin","Mario"]};constyAxis={labels:["Mon","Tues","Wed","Thurs","Fri","Sat"]};provide('heatmap',[Tooltip,Legend]);constcellRender=(args)=>{args.displayText=args.value+"$";};</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings="titleSettings":xAxis="xAxis":yAxis="yAxis":dataSource="dataSource":cellRender="cellRender"></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from"@syncfusion/ej2-vue-heatmap";exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:"Sales Revenue per Employee (in 1000 US$)",textStyle:{size:"15px",fontWeight:"500",fontStyle:"Normal",fontFamily:"Segoe UI"}},xAxis:{labels:["Nancy","Andrew","Janet","Margaret","Steven","Michael","Robert","Laura","Anne","Paul","Karin","Mario"]},yAxis:{labels:["Mon","Tues","Wed","Thurs","Fri","Sat"]}};},provide:{heatmap:[Tooltip,Legend]},methods:{cellRender:function(args){args.displayText=args.value+"$";}}};</script>

    Text style

    The text attributes of the data label such as font-family, font-size, and color can be customized using thetextStyle in thecellSettings property.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};constcellSettings={textStyle:{fontStyle:'Italic',fontFamily:'Segoe UI'}};provide('heatmap',[Tooltip,Legend]);</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']},cellSettings:{textStyle:{fontStyle:'Italic',fontFamily:'Segoe UI'}}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Format

    The format of the data label, such as currency, decimal, percent etc. can be changed usingformat property.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';import{provide}from"vue";constdataSource=[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]];consttitleSettings={text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}};constxAxis={labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']};constyAxis={labels:['Mon','Tues','Wed','Thurs','Fri','Sat']};constcellSettings={format:'${value}'};provide('heatmap',[Tooltip,Legend]);</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[73,39,26,39,94,0],[93,58,53,38,26,68],[99,28,22,4,66,90],[14,26,97,69,69,3],[7,46,47,47,88,6],[41,55,73,23,3,79],[56,69,21,86,3,33],[45,7,53,81,95,79],[60,77,74,68,88,51],[25,25,10,12,78,14],[25,56,55,58,12,82],[74,33,88,23,86,59]],titleSettings:{text:'Sales Revenue per Employee (in 1000 US$)',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'Segoe UI'}},xAxis:{labels:['Nancy','Andrew','Janet','Margaret','Steven','Michael','Robert','Laura','Anne','Paul','Karin','Mario']},yAxis:{labels:['Mon','Tues','Wed','Thurs','Fri','Sat']},cellSettings:{format:'${value}'}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Template

    Any HTML elements can be added as a template in the data labels by using thelabelTemplate property ofcellSettings in the HeatMap.

    The following examples show various data binding methods in the HeatMap using thelabelTemplate property.

    Array binding

    By including${value} in the template content, the value from the data source for the corresponding cell can be displayed in the HeatMap cell as data label template content. Additionally, the x-axis and y-axis label values can be displayed by including${xLabel} and${yLabel} in the template content.

    Table

    The following example demonstrates how to add a data label template for array table binding.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{provide}from"vue";import{HeatMapComponentasEjsHeatmap,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';constdataSource=[[[4,39],[3,8],[1,3],[1,10],[4,4],[2,15]],[[4,28],[5,92],[5,73],[3,1],[3,4],[4,126]],[[4,45],[5,152],[0,44],[4,54],[5,243],[2,45]]];consttitleSettings={text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit'}};constxAxis={labels:['2015','2016','2017']};constyAxis={labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']};constcellSettings={labelTemplate:'<div>${value}</div>'};provide('heatmap',[Tooltip,Legend]);</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[[4,39],[3,8],[1,3],[1,10],[4,4],[2,15]],[[4,28],[5,92],[5,73],[3,1],[3,4],[4,126]],[[4,45],[5,152],[0,44],[4,54],[5,243],[2,45]]],titleSettings:{text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit'}},xAxis:{labels:['2015','2016','2017']},yAxis:{labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']},cellSettings:{labelTemplate:'<div>${value}</div>'}}},provide:{heatmap:[Tooltip,Legend]}}</script>

    Cell

    The following example demonstrates how to add a data label template for array cell binding.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':dataSourceSettings='dataSourceSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{provide}from"vue";import{HeatMapComponentasEjsHeatmap,Adaptor,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';constdataSource=[[0,0,[4,39]],[0,1,[3,8]],[0,2,[1,3]],[0,3,[1,10]],[0,4,[4,4]],[0,5,[2,15]],[1,0,[4,28]],[1,1,[5,92]],[1,2,[5,73]],[1,3,[3,1]],[1,4,[3,4]],[1,5,[4,126]],[2,0,[4,45]],[2,1,[5,152]],[2,2,[0,44]],[2,3,[4,54]],[2,4,[5,243]],[2,5,[2,45]]];consttitleSettings={text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit',},};constxAxis={labels:['2015','2016','2017']};constyAxis={labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']};constcellSettings={labelTemplate:'<div>${value}</div>'};constdataSourceSettings={isJsonData:false,adaptorType:'Cell'};provide('heatmap',[Tooltip,Legend,Adaptor]);</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':dataSourceSettings='dataSourceSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Adaptor,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[[0,0,[4,39]],[0,1,[3,8]],[0,2,[1,3]],[0,3,[1,10]],[0,4,[4,4]],[0,5,[2,15]],[1,0,[4,28]],[1,1,[5,92]],[1,2,[5,73]],[1,3,[3,1]],[1,4,[3,4]],[1,5,[4,126]],[2,0,[4,45]],[2,1,[5,152]],[2,2,[0,44]],[2,3,[4,54]],[2,4,[5,243]],[2,5,[2,45]]],titleSettings:{text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit',},},xAxis:{labels:['2015','2016','2017']},yAxis:{labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']},cellSettings:{labelTemplate:'<div>${value}</div>'},dataSourceSettings:{isJsonData:false,adaptorType:'Cell'}}},provide:{heatmap:[Tooltip,Legend,Adaptor]}}</script>

    JSON binding

    By including the desired field name in the template content, such as${value}, the value from the data source for the corresponding cell can be displayed in the HeatMap cell as data label template content.

    Table

    The following example demonstrates how to add a data label template for JSON table binding.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':dataSourceSettings='dataSourceSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{provide}from"vue";import{HeatMapComponentasEjsHeatmap,Adaptor,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';constdataSource=[{Year:'2017',image:'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/golf-ball.png','Jan-Feb':[4,39],'Mar-Apr':[3,8],'May-Jun':[1,3],'Jul-Aug':[1,10],'Sep-Oct':[4,4],'Nov-Dec':[2,15]},{Year:'2016',image:'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/basket-ball.png','Jan-Feb':[4,28],'Mar-Apr':[5,92],'May-Jun':[5,73],'Jul-Aug':[3,1],'Sep-Oct':[3,4],'Nov-Dec':[4,126]},{Year:'2015',image:'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/foot-ball.png','Jan-Feb':[4,45],'Mar-Apr':[5,152],'May-Jun':[0,44],'Jul-Aug':[4,54],'Sep-Oct':[5,243],'Nov-Dec':[2,45]}];consttitleSettings={text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit',},};constxAxis={labels:['2015','2016','2017']};constyAxis={labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']};constcellSettings={labelTemplate:"<div><img style='width:20px;height:20px;' src='${image}'/> </div>"};constdataSourceSettings={isJsonData:true,adaptorType:'Table',xDataMapping:'Year'};provide('heatmap',[Tooltip,Legend,Adaptor]);</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':dataSourceSettings='dataSourceSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Adaptor,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[{Year:'2017',image:'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/golf-ball.png','Jan-Feb':[4,39],'Mar-Apr':[3,8],'May-Jun':[1,3],'Jul-Aug':[1,10],'Sep-Oct':[4,4],'Nov-Dec':[2,15]},{Year:'2016',image:'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/basket-ball.png','Jan-Feb':[4,28],'Mar-Apr':[5,92],'May-Jun':[5,73],'Jul-Aug':[3,1],'Sep-Oct':[3,4],'Nov-Dec':[4,126]},{Year:'2015',image:'https://ej2.syncfusion.com/vue/demos/src/circular-gauge/images/foot-ball.png','Jan-Feb':[4,45],'Mar-Apr':[5,152],'May-Jun':[0,44],'Jul-Aug':[4,54],'Sep-Oct':[5,243],'Nov-Dec':[2,45]}],titleSettings:{text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit',},},xAxis:{labels:['2015','2016','2017']},yAxis:{labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']},cellSettings:{labelTemplate:"<div><img style='width:20px;height:20px;' src='${image}'/> </div>"},dataSourceSettings:{isJsonData:true,adaptorType:'Table',xDataMapping:'Year'}}},provide:{heatmap:[Tooltip,Legend,Adaptor]}}</script>

    Cell

    The following example demonstrates how to add a data label template for JSON cell binding.

    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':dataSourceSettings='dataSourceSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><scriptsetup>import{provide}from"vue";import{HeatMapComponentasEjsHeatmap,Adaptor,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';constdataSource=[{Year:'2017',Months:'Jan-Feb',Accidents:4,Fatalities:39},{Year:'2017',Months:'Mar-Apr',Accidents:3,Fatalities:8},{Year:'2017',Months:'May-Jun',Accidents:1,Fatalities:3},{Year:'2017',Months:'Jul-Aug',Accidents:1,Fatalities:10},{Year:'2017',Months:'Sep-Oct',Accidents:4,Fatalities:4},{Year:'2017',Months:'Nov-Dec',Accidents:2,Fatalities:15},{Year:'2016',Months:'Jan-Feb',Accidents:4,Fatalities:28},{Year:'2016',Months:'Mar-Apr',Accidents:5,Fatalities:92},{Year:'2016',Months:'May-Jun',Accidents:5,Fatalities:73},{Year:'2016',Months:'Jul-Aug',Accidents:3,Fatalities:1},{Year:'2016',Months:'Sep-Oct',Accidents:3,Fatalities:4},{Year:'2016',Months:'Nov-Dec',Accidents:4,Fatalities:126},{Year:'2015',Months:'Jan-Feb',Accidents:4,Fatalities:45},{Year:'2015',Months:'Mar-Apr',Accidents:5,Fatalities:152},{Year:'2015',Months:'May-Jun',Accidents:0,Fatalities:0},{Year:'2015',Months:'Jul-Aug',Accidents:4,Fatalities:54},{Year:'2015',Months:'Sep-Oct',Accidents:5,Fatalities:243},{Year:'2015',Months:'Nov-Dec',Accidents:2,Fatalities:45},];consttitleSettings={text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit',},};constxAxis={labels:['2015','2016','2017']};constyAxis={labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']};constcellSettings={labelTemplate:"<div> Accidents - ${Accidents}</div>"};constdataSourceSettings={isJsonData:true,adaptorType:'Cell',xDataMapping:'Year',yDataMapping:'Months',valueMapping:'Fatalities',};provide('heatmap',[Tooltip,Legend,Adaptor]);</script>
    <template><divid="app"><ejs-heatmapid="heatmap":titleSettings='titleSettings':dataSourceSettings='dataSourceSettings':xAxis='xAxis':yAxis='yAxis':dataSource='dataSource':cellSettings='cellSettings'></ejs-heatmap></div></template><script>import{HeatMapComponent,Adaptor,Tooltip,Legend}from'@syncfusion/ej2-vue-heatmap';exportdefault{name:"App",components:{"ejs-heatmap":HeatMapComponent},data:function(){return{dataSource:[{Year:'2017',Months:'Jan-Feb',Accidents:4,Fatalities:39},{Year:'2017',Months:'Mar-Apr',Accidents:3,Fatalities:8},{Year:'2017',Months:'May-Jun',Accidents:1,Fatalities:3},{Year:'2017',Months:'Jul-Aug',Accidents:1,Fatalities:10},{Year:'2017',Months:'Sep-Oct',Accidents:4,Fatalities:4},{Year:'2017',Months:'Nov-Dec',Accidents:2,Fatalities:15},{Year:'2016',Months:'Jan-Feb',Accidents:4,Fatalities:28},{Year:'2016',Months:'Mar-Apr',Accidents:5,Fatalities:92},{Year:'2016',Months:'May-Jun',Accidents:5,Fatalities:73},{Year:'2016',Months:'Jul-Aug',Accidents:3,Fatalities:1},{Year:'2016',Months:'Sep-Oct',Accidents:3,Fatalities:4},{Year:'2016',Months:'Nov-Dec',Accidents:4,Fatalities:126},{Year:'2015',Months:'Jan-Feb',Accidents:4,Fatalities:45},{Year:'2015',Months:'Mar-Apr',Accidents:5,Fatalities:152},{Year:'2015',Months:'May-Jun',Accidents:0,Fatalities:0},{Year:'2015',Months:'Jul-Aug',Accidents:4,Fatalities:54},{Year:'2015',Months:'Sep-Oct',Accidents:5,Fatalities:243},{Year:'2015',Months:'Nov-Dec',Accidents:2,Fatalities:45},],titleSettings:{text:'Commercial Aviation Accidents and Fatalities by year 2015 - 2017',textStyle:{size:'15px',fontWeight:'500',fontStyle:'Normal',fontFamily:'inherit',},},xAxis:{labels:['2015','2016','2017']},yAxis:{labels:['Jan-Feb','Mar-Apr','May-Jun','Jul-Aug','Sep-Oct','Nov-Dec']},cellSettings:{labelTemplate:"<div> Accidents - ${Accidents}</div>"},dataSourceSettings:{isJsonData:true,adaptorType:'Cell',xDataMapping:'Year',yDataMapping:'Months',valueMapping:'Fatalities',}}},provide:{heatmap:[Tooltip,Legend,Adaptor]}}</script>

    See Also

    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