动图5移除y轴
动图5移除y轴
提问于 2022-04-06 11:37:38
我正试图从我的图形中移除Y轴。我成功地移除了X轴。移除Y轴的原因是因为图形将显示在一个小区域内。
这就是我现在拥有的：
我移除了图像上的Y轴。这就是我想要达到的目标：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>visits_per_week_last_2_years</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="chartdiv_visits_per_week_last_two_years" style="width: 100%;height: 80vh;"></div>
<script src="../../_admin/_javascripts/amcharts/index.js"></script>
<script src="../../_admin/_javascripts/amcharts/xy.js"></script>
<script src="../../_admin/_javascripts/amcharts/themes/Animated.js"></script>
<script src="visits_per_week_last_2_years_K7MRCJnv8nRrBIMGVNkZ.js"></script>
</body>
</html>Javascript:
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var rootA = am5.Root.new("chartdiv_visits_per_week_last_two_years");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
rootA.setThemes([
am5themes_Animated.new(rootA)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
panX: false,
panY: false,
layout: rootA.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
// var legendA = chartA.children.push(
// am5.Legend.new(rootA, {
// centerX: am5.p50,
// x: am5.p50
// })
// );
// Set data
var data = [{
xlabelXYChart: "6",
value1: 2,
value2: 0
},{
xlabelXYChart: "10",
value1: 1,
value2: 0
},{
xlabelXYChart: "14",
value1: 1,
value2: 0
}]
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, {
categoryField: "xlabelXYChart",
renderer: am5xy.AxisRendererX.new(rootA, {
cellStartLocation: 0.1,
cellEndLocation: 0.9
}),
tooltip: am5.Tooltip.new(rootA, {})
}));
xAxis.data.setAll(data);
var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
renderer: am5xy.AxisRendererY.new(rootA, {})
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName) {
var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "xlabelXYChart"
}));
series.columns.template.setAll({
tooltipText: "{categoryX} {name}: {valueY}",
width: am5.percent(90),
tooltipY: 0
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(rootA, {
locationY: 0,
sprite: am5.Label.new(rootA, {
text: "{valueY}",
fill: rootA.interfaceColors.get("alternativeText"),
centerY: 0,
centerX: am5.p50,
populateText: true
})
});
});
legendA.data.push(series);
}
makeSeries("2022", "value1");
makeSeries("2021", "value2");
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/#Forcing_appearance_animation
chartA.appear(1000, 100);谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-08 08:37:30
试着替换：
var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
renderer: am5xy.AxisRendererY.new(rootA, {})
}));在这方面：
var yRenderer = am5xy.AxisRendererY.new(rootA, {})
yRenderer.labels.template.set('visible', false)
var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
renderer: yRenderer
}));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71766069
复制相关文章
相似问题
腾讯云开发者
