图表渲染时默认不显示 X 轴标签。单击图例(例如 T2)后,它会显示。详情请看下面的图片。
图1:标签未显示。 图2:点击图例(T2)时,出现标签
有人能告诉我这里出了什么问题吗?我在图表调试器的控制台中没有看到任何错误
尝试复制该问题,在此示例中旋转后 X 轴标签正确呈现:http://jsfiddle.net/xykvfru8/
"labelDisplay": "rotate"
请您在上述示例中复制您的问题并分享吗?
在此模式下,您可以将长 x 轴标签换行为多行。如果图表中没有足够的空间,此模式将自动修剪标签,在末尾添加省略号,并显示此类标签的工具提示。要换行数据标签,请将 labelDisplay 属性设置为换行。参考以下代码:
{
"chart": {
"rotateLabels": "0",
"labelDisplay": "wrap"
}
}
这是现场演示代码 -
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'mscolumn2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Sales Trends",
"subcaption": "2016 - 2017",
"xaxisname": "Month",
"yaxisname": "Revenue",
"numberprefix": "$",
"labelDisplay": "wrap"
},
"categories": [{
"category": [{
"label": "12-Jan-2016"
},
{
"label": "02-Feb-2016"
},
{
"label": "15-Mar-2016"
},
{
"label": "10-Apr-2016"
},
{
"label": "22-May-2016"
},
{
"label": "11-Jun-2016"
},
{
"label": "21-Jul-2016"
},
{
"label": "02-Aug-2016"
},
{
"label": "12-Sep-2016"
},
{
"label": "18-Oct-2016"
},
{
"label": "14-Nov-2016"
},
{
"label": "28-Dec-2016"
},
{
"label": "21-Jan-2017"
},
{
"label": "11-Feb-2017"
},
{
"label": "06-Mar-2017"
},
{
"label": "14-Apr-2017"
},
{
"label": "11-May-2017"
},
{
"label": "28-Jun-2017"
},
{
"label": "30-Jul-2017"
},
{
"label": "19-Aug-2017"
},
{
"label": "23-Sep-2017"
},
{
"label": "22-Oct-2017"
},
{
"label": "19-Nov-2017"
},
{
"label": "22-Dec-2017"
}
]
}],
"dataset": [{
"data": [{
"value": "27400"
},
{
"value": "29800"
},
{
"value": "25800"
},
{
"value": "26800"
},
{
"value": "29600"
},
{
"value": "32600"
},
{
"value": "31800"
},
{
"value": "36700"
},
{
"value": "29700"
},
{
"value": "31900"
},
{
"value": "34800"
},
{
"value": "24800"
},
{
"value": "26300"
},
{
"value": "31800"
},
{
"value": "30900"
},
{
"value": "33000"
},
{
"value": "36200"
},
{
"value": "32100"
},
{
"value": "37500"
},
{
"value": "38500"
},
{
"value": "35400"
},
{
"value": "38200"
},
{
"value": "33300"
},
{
"value": "38300"
}
]
}]
}
});
revenueChart.render();
});
这是演示小提琴 - https://jsfiddle.net/h9s4p7cu/2/
请参阅文档 - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/data-labels