如何显示百分比值?

时间:2019-07-04 09:45:45

标签: javascript amcharts

此来源是从Ajax获取数据。我希望百分比值和价格值会出现在同一空间中。我创建了一个百分比轴,但与价格轴的差异太大。这是因为价格值比百分比值大得多。如何解决?

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.numberFormatter.numberFormat = "#,###";
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;

var valueAxis1 = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis1.renderer.opposite = true;
valueAxis1.guides = data.margin_percent;
valueAxis1.min = 0;
valueAxis1.max = 100;

// Create series
function createSeries(field, name) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueX = field;
  series.dataFields.categoryY = "year";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]";
  series.columns.template.height = am4core.percent(100);
  series.sequencedInterpolation = true;

  var valueLabel = series.bullets.push(new am4charts.LabelBullet());
  valueLabel.label.text = "{valueX}";
  valueLabel.label.horizontalCenter = "left";
  valueLabel.label.dx = 10;
  valueLabel.label.hideOversized = false;
  valueLabel.label.truncate = false;

  var categoryLabel = series.bullets.push(new am4charts.LabelBullet());
  categoryLabel.label.text = "{name}";
  categoryLabel.label.horizontalCenter = "right";
  categoryLabel.label.dx = -10;
  categoryLabel.label.fill = am4core.color("#fff");
  categoryLabel.label.hideOversized = false;
  categoryLabel.label.truncate = false;
}

createSeries("year_sales", "sales");
createSeries("year_cost", "cost");

var lineSeries = chart.series.push(new am4charts.LineSeries());
lineSeries.dataFields.valueX = "margin_percent";
lineSeries.dataFields.categoryY = "year";
lineSeries.name = "margin";
lineSeries.stroke = am4core.color("#fdd400");
lineSeries.strokeWidth = 3;
lineSeries.tooltipText = "margin in {categoryY}: {valueX.value}";

0 个答案:

没有答案
相关问题