Javascript 是否自动截断长类别轴标签，但在图例中显示完整标签？
我正在使用amchart绘制图表。下面是代码Javascript 是否自动截断长类别轴标签，但在图例中显示完整标签？,javascript,amcharts,Javascript,Amcharts,我正在使用amchart绘制图表。下面是代码 var chart = AmCharts.makeChart("chartdiv", { "theme": "light", "type": "serial", "startDuration": 2, "dataProvider": [{ "country": "This is Sample Data with long label", "visits": 4025, "
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"dataProvider": [{
"country": "This is Sample Data with long label",
"visits": 4025,
"color": "#FF0F00"
}, {
"country": "This is Sample Data with long label1",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "This is Sample Data with long label2",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "This is Sample Data with long label3",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "This is Sample Data with long label4",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "This is Sample Data with long label5",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "This is Sample Data with long label6",
"visits": 984,
"color": "#04D215"
}, {
"country": "This is Sample Data with long label7",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "This is Sample Data with long label8",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "This is Sample Data with long label9",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "This is Sample Data with long label10",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "This is Sample Data with long label11",
"visits": 441,
"color": "#CD0D74"
}, {
"country": "This is Sample Data with long label12",
"visits": 395,
"color": "#754DEB"
}, {
"country": "This is Sample Data with long label13",
"visits": 386,
"color": "#DDDDDD"
}, {
"country": "This is Sample Data with long label14",
"visits": 338,
"color": "#333333"
}],
"valueAxes": [{
"position": "left",
"axisAlpha":0,
"gridAlpha":0
}],
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"colorField": "color",
"fillAlphas": 0.85,
"lineAlpha": 0.1,
"type": "column",
"topRadius":1,
"valueField": "visits"
}],
"depth3D": 40,
"angle": 30,
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha":0,
"gridAlpha":0
},
"labelFunction": function(label, item, axis) {
var chart = axis.chart;
if ( (chart.realWidth <= 300 ) && ( label.length > 5 ) )
return label.substr(0, 5) + '...';
if ( (chart.realWidth <= 500 ) && ( label.length > 10 ) )
return label.substr(0, 10) + '...';
return label;
},
"legend": {
"useGraphSettings": true
},
"export": {
"enabled": true
}
}, 0);
var chart=AmCharts.makeChart（“chartdiv”{
“主题”：“光”，
“类型”：“串行”，
“起始持续时间”：2，
“数据提供者”：[{
“国家”：“这是带有长标签的样本数据”，
“访问”：4025，
“颜色”：“FF0F00”
}, {
“国家”：“这是带有长标签1的样本数据”，
“访问”：1882年，
“颜色”：“FF6600”
}, {
“国家”：“这是带有长标签2的样本数据”，
“访问”：1809年，
“颜色”：“FF9E01”
}, {
“国家”：“这是带有长标签3的样本数据”，
“访问”：1322次，
“颜色”：“FCD202”
}, {
“国家”：“这是带有长标签4的样本数据”，
“访问”：1122次，
“颜色”：“#F8FF01”
}, {
“国家”：“这是带有长标签5的样本数据”，
“访问”：1114，
“颜色”：“#B0DE09”
}, {
“国家”：“这是带有长标签6的样本数据”，
“访问”：984，
“颜色”：“04D215”
}, {
“国家”：“这是带有长标签7的样本数据”，
“访问”：711，
“颜色”：“0D8ECF”
}, {
“国家”：“这是带有长标签8的样本数据”，
“访问”：665次，
“颜色”：“0D52D1”
}, {
“国家”：“这是带有长标签9的样本数据”，
“访问”：580，
“颜色”：“2A0CD0”
}, {
“国家”：“这是带有长标签10的样本数据”，
“访问”：443，
“颜色”：“8A0CCF”
}, {
“国家”：“这是带有长标签11的样本数据”，
“访问”：441，
“颜色”：“CD0D74”
}, {
“国家”：“这是带长标签的样本数据12”，
“访问”：395次，
“颜色”：“754EB”
}, {
“国家”：“这是带有长标签13的样本数据”，
“访问”：386次，
“颜色”：“DDDDDD”
}, {
“国家”：“这是带长标签的样本数据14”，
“访问”：338次，
“颜色”：“#333333”
}],
“价值轴”：[{
“位置”：“左”，
“axisAlpha”：0，
“gridAlpha”：0
}],
“图表”：[{
“文本”：“[[category]]：[[value]]”，
“颜色字段”：“颜色”，
“填充字母”：0.85，
“lineAlpha”：0.1，
“类型”：“列”，
“顶部半径”：1，
“valueField”：“访问”
}],
“深度3D”：40，
“角度”：30，
“图表光标”：{
“CategoryBallooneEnabled”：false，
“cursorAlpha”：0，
“可缩放”：错误
},
“类别字段”：“国家”，
“分类法”：{
“网格位置”：“开始”，
“axisAlpha”：0，
“gridAlpha”：0
},
“labelFunction”：功能（标签、项目、轴）{
var图表=axis.chart；
如果（（chart.realWidth 5））
返回标签.substr（0，5）+'…'；
如果（（图表10））
返回标签.substr（0，10）+'…'；
退货标签；
},
“传奇”：{
“useGraphSettings”：正确
},
“出口”：{
“已启用”：真
}
}, 0);
[1] 制作
labelFunction"labelFunction": function(label, item, axis) {
var chart = axis.chart;
console.log("CHART:", chart.realWidth, label.length, label );
if ( ( label.length > 5 ) ){
console.log("CHARTLABEL:", label.substr(0, 5) + '...');
return label.substr(0, 7) + '...';
}
if ( ( label.length > 10 ) ){
return label.substr(0, 10) + '...';
}
return label;
},
categoryAxis最终工作解决方案：制作
labelFunction"labelFunction": function(label, item, axis) {
var chart = axis.chart;
console.log("CHART:", chart.realWidth, label.length, label );
if ( ( label.length > 5 ) ){
console.log("CHARTLABEL:", label.substr(0, 5) + '...');
return label.substr(0, 7) + '...';
}
if ( ( label.length > 10 ) ){
return label.substr(0, 10) + '...';
}
return label;
},
categoryAxis最终解决方案：代码中有几个小错误：
不在labelFunctioncategoryAxis- 图表的大小从不低于500px，因此标签从未像示例中那样修剪过
- 有些代码可以放在变量中，以便更容易调试
//将数据对象与调用分开
var数据提供程序=[
{
国家：“这是带有长标签的样本数据”，
浏览人数：4025，
颜色：“FF0F00”
},
{
国家：“这是带有长标签1的样本数据”，
访问次数：1882，
颜色：“FF6600”
},
{
国家：“这是带有长标签2的样本数据”，
访问：1809，
颜色：“FF9E01”
},
{
国家：“这是长标签3的样本数据”，
访问次数：1322，
颜色：“FCD202”
}
];
var chart=AmCharts.makeChart(
“沙特迪夫”，
{
主题：“光”，
类型：“串行”，
起始时间：2，
数据提供者：数据提供者，
valueAxes：[
{
位置：“左”，
axisAlpha:0，
gridAlpha:0
}
],
图表：[
{
气球文字：“[[category]]：[[value]]”，
色域：“颜色”，
填充字母：0.85，
线性α：0.1，
键入：“列”，
顶部半径：1，
valueField：“访问”
}
],
深度3D:40，
角度：30，
图表光标：{
CategoryBallonEnabled:false，
cursorAlpha:0，
可缩放：错误
},
类别字段：“国家”，
类别：{
网格位置：“开始”，
axisAlpha:0，
gridAlpha:0，
labelFunction:trimLabel，
},
图例：{
useGraphSettings:正确
},
出口：{
已启用：true
}
},
0
);
//函数来修剪标签
功能标签（标签、项目、轴）{
var chartWidth=axis.chart.realWidth；
var maxLabelLength=15；//不计算点数。。。
//图表宽度小于300px时进行修剪
如果（图表宽度5）
返回标签。substr（0，5）+“…”；
//图表宽度小于500px时进行修剪
如果（图表宽度10）
返回标签.substr(
/*
Plugin to generate legend markers based on category
and fillColor/lineColor/color field from the chart data by using
the legend's custom data array. Also allows for toggling markers
by completely removing/adding columns from the chart
The plugin assumes there is only one graph object.
*/
AmCharts.addInitHandler(function(chart) {
//method to handle removing/adding columns when the marker is toggled
function handleCustomMarkerToggle(legendEvent) {
var dataProvider = legendEvent.chart.dataProvider;
var itemIndex; //store the location of the removed item
//Set a custom flag so that the dataUpdated event doesn't fire infinitely, in case you have
//a dataUpdated event of your own
legendEvent.chart.toggleLegend = true;
// The following toggles the markers on and off.
// The only way to "hide" a column and reserved space on the axis is to remove it
// completely from the dataProvider. You'll want to use the hidden flag as a means
// to store/retrieve the object as needed and then sort it back to its original location
// on the chart using the dataIdx property in the init handler
if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
legendEvent.dataItem.hidden = false;
dataProvider.push(legendEvent.dataItem.storedObj);
legendEvent.dataItem.storedObj = undefined;
//re-sort the array by dataIdx so it comes back in the right order.
dataProvider.sort(function(lhs, rhs) {
return lhs.dataIdx - rhs.dataIdx;
});
} else {
// toggle the marker off
legendEvent.dataItem.hidden = true;
//get the index of the data item from the data provider, using the
//dataIdx property.
for (var i = 0; i < dataProvider.length; ++i) {
if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) {
itemIndex = i;
break;
}
}
//store the object into the dataItem
legendEvent.dataItem.storedObj = dataProvider[itemIndex];
//remove it
dataProvider.splice(itemIndex, 1);
}
legendEvent.chart.validateData(); //redraw the chart
}
//check if legend is enabled and custom generateFromData property
//is set before running
if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) {
return;
}
var categoryField = chart.categoryField;
var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField || chart.graphs[0].colorField;
var legendData = chart.dataProvider.map(function(data, idx) {
var markerData = {
"title": data[categoryField] + ": " + data[chart.graphs[0].valueField],
"color": data[colorField],
"dataIdx": idx //store a copy of the index of where this appears in the dataProvider array for ease of removal/re-insertion
};
if (!markerData.color) {
markerData.color = chart.graphs[0].lineColor;
}
data.dataIdx = idx; //also store it in the dataProvider object itself
return markerData;
});
chart.legend.data = legendData;
//make the markers toggleable
chart.legend.switchable = true;
chart.legend.addListener("clickMarker", handleCustomMarkerToggle);
}, ["serial"]);
"legend": {
"generateFromData": true //custom property for the plugin
},