amChart 日期轴偏移

Question

时间轴标签和图表上的数据点不对齐，最好看图片说明

有人知道如何解决这个问题吗？

const ratingTrendChart = am4core.create("chart", am4charts.XYChart);

ratingTrendChart.legend = new am4charts.Legend();
ratingTrendChart.legend.useDefaultMarker = true;
const marker = ratingTrendChart.legend.markers.template.children.getIndex(0);
marker.cornerRadius(6, 6, 6, 6);
marker.height = 12;
ratingTrendChart.legend.markers.template.height = 12;
ratingTrendChart.legend.labels.template.text = "[{color}]{name}[/]";
ratingTrendChart.legend.labels.template.fontSize = 12;
ratingTrendChart.legend.paddingBottom = 0;
ratingTrendChart.legend.contentAlign = "left";

ratingTrendChart.numberFormatter.numberFormat = "#.00";

const dateAxis = ratingTrendChart.xAxes.push(new am4charts.DateAxis());
const valueAxis = ratingTrendChart.yAxes.push(new am4charts.ValueAxis());

// Add vertical scrollbar
ratingTrendChart.scrollbarY = new am4core.Scrollbar();
ratingTrendChart.scrollbarY.marginLeft = 15;

// Add cursor
ratingTrendChart.cursor = new am4charts.XYCursor();
ratingTrendChart.cursor.behavior = "zoomY";
ratingTrendChart.cursor.lineX.disabled = true;
ratingTrendChart.cursor.xAxis = dateAxis;
ratingTrendChart.cursor.yAxis = valueAxis;

valueAxis.min = 1;
valueAxis.max = 5;
valueAxis.strictMinMax = true;
valueAxis.keepSelection = true;

dateAxis.baseInterval = {
  timeUnit : "week",
  count : 1
}

const data = [
  {
    "date": new Date("2021-02-05T07:00:00.000Z"),
    "safety":2.333333,
    "facility":2.333333,
    "staff":2.333333,
    "Overall":2.666666,
    "satisfied":3.666666
  },
  {
    "date": new Date("2021-02-12T07:00:00.000Z"),
    "satisfied":4.333333,
    "safety":4.5,
    "Overall":4.571428,
    "facility":5,
    "staff":5},
  {
    "date": new Date("2021-02-19T07:00:00.000Z"),
    "staff":1,
    "satisfied":3,
    "Overall":3.5,
    "safety":5,
    "facility":5
  }
];

ratingTrendChart.data = data;

const names = ["safety","facility","staff","Overall","satisfied"];

names.forEach(q => {
  let s = ratingTrendChart.series.push(new am4charts.LineSeries());
  s.dataFields.valueY = q;
  s.name = q;
  
  s.dataFields.dateX = 'date';
  s.tooltipText = "{name}: [bold]{valueY}[/]";
  let bullet = s.bullets.push(new am4charts.Bullet());
  let circle = bullet.createChild(am4core.Circle);
  circle.width = 5;
  circle.height = 5;
  circle.fill = am4core.color("white");
});

#chart {
  height: 400px;
  width: 700px;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://cdn.amcharts.com/lib/4/lang/de_DE.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/germanyLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/fonts/notosans-sc.js"></script>

<div id="chart">
  <div>

使用代码 sn-p 更新。这几乎就是我正在使用的代码，只是将数据调用替换为硬编码数据。

所以不会让我在没有更多文字的情况下提交此内容...所以无视但只是在这里闲逛一下。

Answer 1

选项 1：网格上的数据点

dateAxis.renderer.labels.template.location = 0.5;
dateAxis.renderer.grid.template.location = 0.5;

演示：https://jsfiddle.net/m40tLbof/

选项 2：网格之间的数据点

dateAxis.renderer.labels.template.location = 0.5;

演示：https://jsfiddle.net/m40tLbof/1/