amcharts-堆叠条形图-无法显示百分比

时间:2020-07-27 19:28:14

标签: javascript amcharts

我正在尝试将百分比值添加到堆积条形图(图表)中。

问题是当我拥有图表的百分比时,所有条形都将始终显示100%。

我已将此添加到我的代码中:

series.calculatePercent = true;

labelBullet.label.text = "{valueX.percent}%";

它将始终显示100% Graph

我现在拥有的代码:

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

知道为什么这不起作用吗?

谢谢!

0 个答案:

没有答案