【问题标题】:How to change the text of the y axis in amcharts如何更改amcharts中y轴的文字
【发布时间】:2020-10-22 14:10:23
【问题描述】:

我正在尝试将 Y 轴上显示的值更改为自定义文本,或在值旁边添加文本。我可以更改 valueAxis 文本吗?

这里是代码

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "year": "2008",
  "label": 101
}, {
  "year": "2009",
  "label": 142
}, {
  "year": "2010",
  "label": 462
}, {
  "year": "2011",
  "label": 364
}, {
  "year": "2012",
  "label": 465
}];

....

// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inversed = false;
valueAxis.title.text = "";
valueAxis.renderer.minLabelPosition = 0.001;

// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "label";
series1.dataFields.categoryX = "year";
series1.name = "Currency";
series1.strokeWidth = 3;
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{name} in {categoryX}: {valueY}";
series1.legendSettings.valueText = "{valueY}";
series1.visible  = false;

// Add chart cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomY";

// Add legend
chart.legend = new am4charts.Legend();

我要更改 200,300,400,500,600,700 和 800 到(例如)200s,300s,400s,500s,600s,700s,800s ..

CodePen

【问题讨论】:

    标签: javascript charts amcharts amcharts4


    【解决方案1】:

    一种快速的方法是使用numberFormatter 并将's' 添加到您的数字格式中,这将影响图表中的所有数值(轴、工具​​提示、图例值等):

    chart.numberFormatter.numberFormat = "#'s'";
    

    在这种情况下,在 s 周围加上引号以对其进行转义很重要,因为它是绝对值的格式修饰符。

    或者,如果您只是针对轴工具提示,请在 getTooltipText 上使用 adapter

    valueAxis.adapter.add("getTooltipText", function(text, target, key) {
     return text + "s";
    });
    

    【讨论】:

      猜你喜欢
      • 2019-12-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多