下面是代码示例:
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,图例中的值。
如何在柱形图中显示图例中的值?
2条答案
按热度按时间t1rydlwq1#
这段代码将工作:
legend.valueLabels.template.setAll({text: '{valueY}'})
brjng4g32#
Try“legend.data.push(series);“我的目的是成功的......