Amcharts 5 删除 y 轴

Question

我正在尝试从图表中删除 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);

感谢您的帮助。

Answer 1

尝试替换：

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
}));

Amcharts 5 删除 y 轴

Amcharts 5 remove y axis

amcharts5