Amcharts 5 Separate Label into points with the same date答案

【问题标题】：Amcharts 5 Separate Label into points with the same dateAmcharts 5 Separate Label into points with the same date
【发布时间】：2022-12-27 00:56:05
【问题描述】：

I use AmCharts 5 and sometimes the data can come with a different value but with the same date

Result example:

[
  {"result":"AAA","date":"2022-06-09T23:00:00","value":155},
  {"result":"BBB","date":"2022-06-10T07:00:00","value":25},
  {"result":"CCC","date":"2022-06-11T07:00:00","value":85},
  {"result":"DDD","date":"2022-06-12T07:00:00","value":65},
  {"result":"EEE","date":"2022-06-12T08:00:00","value":198},
]

But when there is more than one record on the same date, it shows the points, but there is an equal Label for all points.

My code is: https://jsfiddle.net/sNniffer/9xk6q3eu/17/

I need each point to have its Label, even if they are on the same date

【问题讨论】：

标签： amcharts amcharts5

【解决方案1】：

In your example, date strings are all unique!

The easiest solution here is to usehouras timeUnit in the settings of your DateAxis.

am5.ready(function() {

  var root = am5.Root.new("chartdiv");

  var chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
    baseInterval: {
      timeUnit: "hour", // Put "hour" instead of "day"
      count: 1
    },
    renderer: am5xy.AxisRendererX.new(root, {}),
    tooltip: am5.Tooltip.new(root, {})
  }));

  var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));
  
  var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
    xAxis: xAxis
  }));
  cursor.lineY.set("visible", false);

  var series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    categoryXField: "result",
    valueXField: "date",
    valueYField: "value",
    tooltip: am5.Tooltip.new(root, {
      labelText: "[bold]Result:[/] {categoryX}
[bold]Date:[/] {valueX.formatDate()}
[bold]Value:[/] {valueY}"
    })
  }));

  series.fills.template.setAll({
    visible: true,
    fillOpacity: 0.2
  });
  
  series.bullets.push(function() {
    return am5.Bullet.new(root, {
      sprite: am5.Circle.new(root, {
        radius: 8,
        stroke: root.interfaceColors.get("background"),
        strokeWidth: 2,
        interactive: false,
        fill: series.get("fill")
      })
    });
  });
 
  var data = [
    {result: "AAA", date: new Date("2022-06-09T23:00:00").getTime(), value: 155},
    {result: "BBB", date: new Date("2022-06-10T07:00:00").getTime(), value: 25},
    {result: "CCC", date: new Date("2022-06-11T07:00:00").getTime(), value: 85},
    {result: "DDD", date: new Date("2022-06-12T07:00:00").getTime(), value: 65},
    {result: "EEE", date: new Date("2022-06-12T08:00:00").getTime(), value: 198}
  ];
  
  series.data.setAll(data);
     
});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>

【讨论】：