Question

我查看了此链接，以了解如何在armChart上实现趋势线。该示例与基于日期的系列一起使用。我想将趋势线应用于基于非日期的系列。请任何人告诉我我在下面的代码中做错了什么

这是演示https://www.amcharts.com/demos/trend-lines/的链接

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/kelly.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>


<div id="div1" style="width:900px; height:500px">

</div>

<script>
  am4core.useTheme(am4themes_kelly);
  am4core.useTheme(am4themes_animated);
  var chart = am4core.create('div1', am4charts.XYChart);
  chart.scrollbarX = new am4core.Scrollbar();
  chart.data = [{
      'Region': 'Nigeria',
      'Value': 100
    },
    {
      'Region': 'Canada',
      'Value': 3
    },
    {
      'Region': 'WestAfrica',
      'Value': 43
    }
  ];
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = 'Region';
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 30;
  categoryAxis.renderer.labels.template.adapter.add('dy', function(dy, target) {
    if (target.dataItem && target.dataItem.index & 2 == 2) {
      return dy + 25;
    }
    return dy;
  });

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = 'Value';
  series.dataFields.categoryX = 'Region';
  series.name = 'Regions';
  series.columns.template.tooltipText = '{categoryX}: [bold]{valueY}[/]';
  series.columns.template.fillOpacity = 0.8;
  var columnTemplate = series.columns.template;
  columnTemplate.strokeWidth = 2;
  columnTemplate.strokeOpacity = 1;

  var trend = chart.series.push(new am4charts.LineSeries());
  trend.dataFields.valueY = "Value";
  trend.dataFields.dateX = "Region";
  trend.strokeWidth = 2;
  trend.stroke = am4core.color("#c00");
  trend.data = [{
      "Region": "Nigeria",
      "Value": 10
    },
    {
      "Region": "WestAfrica",
      "Value": 19
    }
  ];
</script>

Answer 1

如果您使用类别轴而不是任何系列中的日期轴，请根据轴的位置将dataField更改为使用categoryX或categoryY。 dateX和dateY用于日期轴对象。

  trend.dataFields.categoryX = "Region";

amCharts4 Trendline不基于日期不显示

1 个答案: