我正在尝试将百分比值添加到堆积条形图(图表)中。
问题是当我拥有图表的百分比时,所有条形都将始终显示100%。
我已将此添加到我的代码中:
series.calculatePercent = true;
和
labelBullet.label.text = "{valueX.percent}%";
它将始终显示100%
我现在拥有的代码:
function callGraph() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("graphDiv", am4charts.XYChart);
// Add data
chart.dataSource.url =
"https://domain.firebaseio.com/voting/total_votes/id.json";
//chart.legend = new am4charts.Legend();
chart.legend = new am4charts.Legend();
chart.legend.position = "right";
chart.legend = false;
//chart.colors
chart.colors.list = [
am4core.color("#F5620F"),
am4core.color("#BDBDBD"),
am4core.color("#0FA2F5")
];
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "game";
categoryAxis.renderer.grid.template.opacity = 0;
categoryAxis.renderer.labels.template.disabled = true;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.renderer.grid.template.opacity = 0;
valueAxis.renderer.ticks.template.strokeOpacity = 0.0;
valueAxis.renderer.ticks.template.stroke = am4core.color("#495C43");
valueAxis.renderer.ticks.template.length = 0;
valueAxis.renderer.line.strokeOpacity = 0.0;
valueAxis.renderer.baseGrid.disabled = true;
valueAxis.renderer.minGridDistance = 40;
valueAxis.renderer.labels.template.disabled = true;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = field;
series.dataFields.categoryY = "game";
series.stacked = true;
series.name = name;
series.calculatePercent = true;
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.locationX = 0.5;
labelBullet.label.text = "{valueX.percent}%";
labelBullet.label.fill = am4core.color("#fff");
}
createSeries("win1");
createSeries("drawX");
createSeries("lose2");
知道为什么这不起作用吗?
谢谢!