amCharts4趋势线不显示没有基于日期

问题描述 投票:1回答:1

我查看了此链接,了解如何在armChart上实现Trendlines。该样本使用基于日期的系列。我想将Trendlines应用于基于非日期的系列。请允许任何人告诉我在下面的代码中我做错了什么

这是演示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>
html asp.net amcharts
1个回答
1
投票

如果您在任何系列中使用类别轴而不是日期轴,请将dataField更改为使用categoryXcategoryY,具体取决于轴的位置。 dateXdateY用于日期轴对象。

  trend.dataFields.categoryX = "Region";
© www.soinside.com 2019 - 2024. All rights reserved.