【问题标题】:How to change label text styles in amcharts4如何更改 amcharts4 中的标签文本样式
【发布时间】:2021-05-11 07:25:36
【问题描述】:

我想更改类别轴标签文本样式,如何在 amcharts4 中进行? 下面是代码,

/**
 * --------------------------------------------------------
 * This demo was created using amCharts V4 preview release.
 *
 * V4 is the latest installement in amCharts data viz
 * library family, to be released in the first half of
 * 2018.
 *
 * For more information and documentation visit:
 * https://www.amcharts.com/docs/v4/
 * --------------------------------------------------------
 */

am4core.useTheme(am4themes_animated);
am4core.useTheme(am4themes_dataviz);

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

chart.data = [
  {
    category: "One",
    value1: 1,
    value2: 5,
    value3: 3,
    value4: 3
  },
  {
    category: "Two",
    value1: 2,
    value2: 5,
    value3: 3,
    value4: 4
  },
  {
    category: "Three",
    value1: 3,
    value2: 5,
    value3: 4,
    value4: 4
  },
  {
    category: "Four",
    value1: 4,
    value2: 5,
    value3: 6,
    value4: 4
  },
  {
    category: "Five",
    value1: 3,
    value2: 5,
    value3: 4,
    value4: 4
  },
  {
    category: "Six",
    value1: 8,
    value2: 7,
    value3: 10,
    value4: 4
  },
  {
    category: "Seven",
    value1: 10,
    value2: 8,
    value3: 6,
    value4: 4
  }
];

chart.colors.step = 2;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
// categoryAxis.renderer.grid.template.location = 0;
// categoryAxis.renderer.line.strokeOpacity = 1;
categoryAxis.renderer.minGridDistance = 30;
 categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 15;
  }
  return dy;
});
categoryAxis.title.text = "Numbers";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());  

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(70);
series1.columns.template.tooltipText = "{name}: {valueY.value}";
series1.name = "Series 1";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "value1";
series1.columns.template.width = am4core.percent(30);
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 400px;
  height: 250px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/dataviz.js"></script>
<div id="chartdiv"></div>

这是相同的快照,

我想将“数字”文本调低一点并使其加粗,我该怎么做?

【问题讨论】:

    标签: javascript html css amcharts amcharts4


    【解决方案1】:

    对于轴标签(一、二、...):

    var axisLabels = categoryAxis.renderer.labels.template;
    axisLabels.fontSize = 17;
    axisLabels.fontWeight = "bold";
    axisLabels.fontFamily = "Tahoma";
    axisLabels.fill = "#ff0000"; // labels color
    

    对于轴标题(数字):

    categoryAxis.title.fontWeight = "bold";
    categoryAxis.title.fontSize = 20;
    categoryAxis.title.fontFamily = "Helvetica";
    categoryAxis.title.fill = "#ff0000";
    

    【讨论】:

    • 我不想更改单个标签样式,我想更改标签“数字”的样式。这个字段- categoryAxis.title.text
    猜你喜欢
    • 1970-01-01
    • 2011-03-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多