本篇文章主要介绍了"FusionCharts中文jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播:自定义图表——数据标签",主要涉及到方面的内容,对于web前端感兴趣的同学可以参考一下:
< FusionChart最新版本下载>数据标签指显示在图表的X轴的数据点的名称。如下图所示:图中的Jan、Feb、Mar等就是图表的数据标签。数据...
< FusionChart最新版本下载>
数据标签指显示在图表的X轴的数据点的名称。如下图所示:

图中的Jan、Feb、Mar等就是图表的数据标签。
数据标签的显示模式
在FusionCharts中你可以根据自己的需求来配置数据标签的排列和显示属性。FusionCharts提供5种不同的显示模式。用于设置数据标签显示模式的属性如下表所示:
属性名称 | 描述 |
labelDisplay | 用于自定义数据标签的对齐方式。5种可供选择的选项:auto、wrap、stagger、rotate或none。默认情况下该属性设置为auto模式。如果你不需要设置X轴标签,将labelDisplay设置为none即可。 |
Auto模式
在该模式下图表自动选择合适的数据标签显示模式-取决于可用的空间。如果数据标签的数量比可用空间大,那么数据标签要么截断(用省略号替换)、包裹或旋转。 当鼠标悬停在截断的数据标签上,将会显示完整的标签文本。Auto模式的2D图表如下图所示:

在Auto模式自定义数据标签所需属性如下表:
属性名称 | 描述 |
labelDisplay | 用于自定义数据标签的对齐方式。5种可供选择的模式:auto、wrap、stagger、rotate或none。默认情况下设置为auto模式。 |
useEllipsesWhenOverflow | 当使用auto模式,长数据标签被截断用省略号替换超出X轴范围的部分。默认值为1。 |
设置auto模式的数据结构如下:
JSON:
{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year",
"xAxisName": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint",
"labelDisplay": "auto"
},
"data": [
{
"label": "January",
"value": "420000"
},
{
"label": "February",
"value": "810000"
},
{
"label": "March",
"value": "720000"
},
{
"label": "April",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "June",
"value": "510000"
},
{
"label": "July",
"value": "680000"
},
{
"label": "August",
"value": "620000"
},
{
"label": "September",
"value": "610000"
},
{
"label": "October",
"value": "490000"
},
{
"label": "November",
"value": "900000"
},
{
"label": "December",
"value": "730000"
}
]
}
XML:
< set label="January" value="420000" />
< set label="February" value="810000" />
< set label="March" value="720000" />
< set label="April" value="550000" />
< set label="May" value="910000" />
< set label="June" value="510000" />
< set label="July" value="680000" />
< set label="August" value="620000" />
< set label="September" value="610000" />
< set label="October" value="490000" />
< set label="November" value="900000" />
< set label="December" value="730000" />
Wrap模式
该模式下,你可以将长数据标签显示在多行里。如果图表的可用空间不够,该模式会自动截断标签并且在末尾加上省略号。

设置wrap模式的数据标签所需属性如下表:
属性名称 | 描述 |
labelDisplay | 用于自定义数据标签的对齐方式。5种可供选择的模式:auto、wrap、stagger、rotate或none。默认情况下设置为auto模式。 |
上图所示wrap模式标签的数据结构如下:
JSON: