列图表中图例中的AmCharts5值

Question

下面是代码示例：

https://codepen.io/DenisRoss/pen/rNpgQLv?editors=0010

​

var root = am5.Root.new("chartdiv");

root.setThemes([am5themes_Animated.new(root)]);

var chart = root.container.children.push(am5xy.XYChart.new(root, {layout: root.verticalLayout}));

var xRenderer = am5xy.AxisRendererX.new(root, {minGridDistance: 0});
xRenderer.labels.template.setAll({});

var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "country",
  renderer: xRenderer,
  tooltip: am5.Tooltip.new(root, {})
}));

var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));


var series = chart.series.push(am5xy.ColumnSeries.new(root, {
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "value",
  categoryXField: "country",
  tooltip: am5.Tooltip.new(root, {
    labelText:"{valueY}"
  })
}));

series.columns.template.adapters.add("fill", function(fill, target) {
  return chart.get("colors").getIndex(series.columns.indexOf(target));
});

series.columns.template.adapters.add("stroke", function(stroke, target) {
  return chart.get("colors").getIndex(series.columns.indexOf(target));
});

var data = [{
  country: "A",
  value: 500
}, {
  country: "B",
  value: 300
}, {
  country: "C",
  value: 200
}];

xAxis.data.setAll(data);
series.data.setAll(data);

var legend = chart.children.push(am5.Legend.new(root, {
  nameField: 'categoryX',
  valueField: 'valueY', // WHY DOES NOT WORK? T__T
  centerX: am5.percent(50),
  x: am5.percent(50),
}));
legend.data.setAll(series.dataItems);

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<div id="chartdiv"></div>

​

它是带有图例的AmCharts5列图。，但图例中没有列的值。

​

​

下面是另一个代码示例：

https://codepen.io/DenisRoss/pen/YzYbRrz?editors=0010

​

var root = am5.Root.new("chartdiv");

root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push(am5percent.PieChart.new(root, {
  layout: root.verticalLayout
}));

var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "categoty",
  legendValueText: "{value}"
}));

series.data.setAll([{
  categoty: "A",
  value: 500
}, {
  categoty: "B",
  value: 300
}, {
  categoty: "C",
  value: 200
}]);

var legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
}));

legend.data.setAll(series.dataItems);

series.appear(1000, 100);

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>

​

它是具有传奇的PieChart，在图例中有值的。

​

​

如何在柱状图中显示图例中的值？

Answer 1

试一试“legend.data.push(系列)”，它在我的结尾起了作用.