在amCharts中显示x轴上的所有值,可以通过以下步骤实现:
autoGridCount
属性为true
,这将自动计算并显示所有x轴上的值。var chart = am4core.create("chartdiv", am4charts.XYChart);
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.labels.template.rotation = -90;
categoryAxis.renderer.labels.template.horizontalCenter = "left";
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.maxWidth = 200;
categoryAxis.renderer.labels.template.wrap = true;
categoryAxis.renderer.labels.template.truncate = true;
categoryAxis.renderer.labels.template.adapter.add("text", function(text) {
return text.replace(/\\n/g, "\n");
});
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return dy + 25;
}
return dy;
});
categoryAxis.renderer.labels.template.adapter.add("dx", function(dx, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return dx - 15;
}
return dx;
});
categoryAxis.renderer.labels.template.adapter.add("rotation", function(rotation, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return -90;
}
return rotation;
});
categoryAxis.renderer.labels.template.adapter.add("horizontalCenter", function(horizontalCenter, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "right";
}
return horizontalCenter;
});
categoryAxis.renderer.labels.template.adapter.add("verticalCenter", function(verticalCenter, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "bottom";
}
return verticalCenter;
});
categoryAxis.renderer.labels.template.adapter.add("maxWidth", function(maxWidth, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 200;
}
return maxWidth;
});
categoryAxis.renderer.labels.template.adapter.add("wrap", function(wrap, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return true;
}
return wrap;
});
categoryAxis.renderer.labels.template.adapter.add("truncate", function(truncate, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return true;
}
return truncate;
});
categoryAxis.renderer.labels.template.adapter.add("text", function(text, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return text.substring(0, 10) + "...";
}
return text;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipText", function(tooltipText, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return target.dataItem.category;
}
return tooltipText;
});
categoryAxis.renderer.labels.template.adapter.add("fill", function(fill, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return am4core.color("#000000");
}
return fill;
});
categoryAxis.renderer.labels.template.adapter.add("fillOpacity", function(fillOpacity, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 1;
}
return fillOpacity;
});
categoryAxis.renderer.labels.template.adapter.add("stroke", function(stroke, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return am4core.color("#000000");
}
return stroke;
});
categoryAxis.renderer.labels.template.adapter.add("strokeOpacity", function(strokeOpacity, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 1;
}
return strokeOpacity;
});
categoryAxis.renderer.labels.template.adapter.add("strokeWidth", function(strokeWidth, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 2;
}
return strokeWidth;
});
categoryAxis.renderer.labels.template.adapter.add("fontFamily", function(fontFamily, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "Arial";
}
return fontFamily;
});
categoryAxis.renderer.labels.template.adapter.add("fontWeight", function(fontWeight, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "bold";
}
return fontWeight;
});
categoryAxis.renderer.labels.template.adapter.add("fontSize", function(fontSize, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 12;
}
return fontSize;
});
categoryAxis.renderer.labels.template.adapter.add("fontStyle", function(fontStyle, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "italic";
}
return fontStyle;
});
categoryAxis.renderer.labels.template.adapter.add("textDecoration", function(textDecoration, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "underline";
}
return textDecoration;
});
categoryAxis.renderer.labels.template.adapter.add("textTransform", function(textTransform, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "uppercase";
}
return textTransform;
});
categoryAxis.renderer.labels.template.adapter.add("cursorOverStyle", function(cursorOverStyle, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "pointer";
}
return cursorOverStyle;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipPosition", function(tooltipPosition, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "fixed";
}
return tooltipPosition;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipY", function(tooltipY, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return -10;
}
return tooltipY;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipX", function(tooltipX, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 0;
}
return tooltipX;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipFill", function(tooltipFill, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return am4core.color("#FFFFFF");
}
return tooltipFill;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipFillOpacity", function(tooltipFillOpacity, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 0.9;
}
return tooltipFillOpacity;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipStroke", function(tooltipStroke, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return am4core.color("#000000");
}
return tooltipStroke;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipStrokeOpacity", function(tooltipStrokeOpacity, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 1;
}
return tooltipStrokeOpacity;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipStrokeWidth", function(tooltipStrokeWidth, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 2;
}
return tooltipStrokeWidth;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipFontFamily", function(tooltipFontFamily, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "Arial";
}
return tooltipFontFamily;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipFontWeight", function(tooltipFontWeight, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "bold";
}
return tooltipFontWeight;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipFontSize", function(tooltipFontSize, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return 12;
}
return tooltipFontSize;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipFontStyle", function(tooltipFontStyle, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "italic";
}
return tooltipFontStyle;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipTextDecoration", function(tooltipTextDecoration, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "underline";
}
return tooltipTextDecoration;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipTextTransform", function(tooltipTextTransform, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "uppercase";
}
return tooltipTextTransform;
});
categoryAxis.renderer.labels.template.adapter.add("tooltipCursorOverStyle", function(tooltipCursorOverStyle, target) {
if (target.dataItem && target.dataItem.index & 2 == 2) {
return "pointer";
}
return tooltipCursorOverStyle;
});
chart.data = [{
"category": "Value 1",
"value": 100
}, {
"category": "Value 2",
"value": 200
}, {
"category": "Value 3",
"value": 300
}, {
"category": "Value 4",
"value": 400
}, {
"category": "Value 5",
"value": 500
}, {
"category": "Value 6",
"value": 600
}, {
"category": "Value 7",
"value": 700
}, {
"category": "Value 8",
"value": 800
}, {
"category": "Value 9",
"value": 900
}, {
"category": "Value 10",
"value": 1000
}];
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
以上代码将在amCharts中创建一个柱状图,并在x轴上显示所有值。你可以根据自己的需求进行调整和定制化。
领取专属 10元无门槛券
手把手带您无忧上云