amChart 日期轴偏移

问题描述

一次轴标签和图表上的数据点不对齐，看图最佳解释

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

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);
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>

更新了代码片段。这几乎就是我正在使用的代码，只是用硬编码数据替换了数据调用。

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

解决方法

选项 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/