amcharts - 如何将周数读入 amCharts？

Question

我无法弄清楚如何让 amCharts 通过设置读取带有周数而不是确切天数的数据chart.dateFormatter.inputDateFormat。一个月中的一周 ( W MMM) 根本不会导入。一年中的一周（ww）加载但月份从第 2 周开始。我在格式化轴或读取数据时做错了什么？

一年中的阅读周显然所有月份都从第 2 周开始。

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "ww";
  
let cellSize = 20;
chart.events.on("datavalidated", function(ev) {

  // Get objects of interest
  let chart = ev.target;
  let categoryAxis = chart.yAxes.getIndex(0);

  // Calculate how we need to adjust chart height
  let adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;

  // get current chart height
  let targetHeight = chart.pixelHeight + adjustHeight;

  // Set it on chart's container
  chart.svgContainer.htmlElement.style.height = targetHeight + "px";
});

var action = {
  "sow" : "brown",
  "harvest" : "yellow",
  "plant" : "green"
}

chart.data = [
  {
    name: "John",
    from: "4",
    to: "8",
    action: action.sow,
  },
  {
    name: "John",
    from: "14",
    to: "20",
    action: action.plant,
  },
  {
    name: "John",
    from: "28",
    to: "40",
    action: action.harvest,
  },
];

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "W MMM";
dateAxis.dateFormats.setKey("week", "W");
dateAxis.periodChangeDateFormats.setKey("week", "MMM");
dateAxis.renderer.minGridDistance = 20;
dateAxis.baseInterval = { count: 1, timeUnit: "week" };
//dateAxis.max = new Date(2021, 0, 4, 24, 0, 0, 0).getTime();
dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;

var series = chart.series.push(new am4charts.ColumnSeries());
series.columns.template.width = am4core.percent(80);
series.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
  
series.dataFields.openDateX = "from";
series.dataFields.dateX = "to";
series.dataFields.categoryY = "name";
series.columns.template.propertyFields.fill = "action"; // get color from data
series.columns.template.propertyFields.stroke = "action";
series.columns.template.strokeOpacity = 1;

chart.scrollbarX = new am4core.Scrollbar();

});

<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://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

对于每月的一周，它将所有内容与每个月的开始对齐，而忽略数据中的周数。

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.paddingRight = 30;
chart.dateFormatter.inputDateFormat = "W MMM";
  
let cellSize = 20;
chart.events.on("datavalidated", function(ev) {

  // Get objects of interest
  let chart = ev.target;
  let categoryAxis = chart.yAxes.getIndex(0);

  // Calculate how we need to adjust chart height
  let adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;

  // get current chart height
  let targetHeight = chart.pixelHeight + adjustHeight;

  // Set it on chart's container
  chart.svgContainer.htmlElement.style.height = targetHeight + "px";
});

var action = {
  "sow" : "brown",
  "harvest" : "yellow",
  "plant" : "green"
}

chart.data = [
  {
    name: "John",
    from: "1 Feb",
    to: "2 Mar",
    action: action.sow,
  },
  {
    name: "John",
    from: "1 Apr",
    to: "1 May",
    action: action.plant,
  },
  {
    name: "John",
    from: "3 Jul",
    to: "1 Nov",
    action: action.harvest,
  },
];

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.inversed = true;

var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter.dateFormat = "W MMM";
dateAxis.dateFormats.setKey("week", "W");
dateAxis.periodChangeDateFormats.setKey("week", "MMM");
dateAxis.renderer.minGridDistance = 20;
dateAxis.baseInterval = { count: 1, timeUnit: "week" };
//dateAxis.max = new Date(2021, 0, 4, 24, 0, 0, 0).getTime();
dateAxis.strictMinMax = true;
dateAxis.renderer.tooltipLocation = 0;

var series = chart.series.push(new am4charts.ColumnSeries());
series.columns.template.width = am4core.percent(80);
series.columns.template.tooltipText = "{name}: {openDateX} - {dateX}";
  
series.dataFields.openDateX = "from";
series.dataFields.dateX = "to";
series.dataFields.categoryY = "name";
series.columns.template.propertyFields.fill = "action"; // get color from data
series.columns.template.propertyFields.stroke = "action";
series.columns.template.strokeOpacity = 1;

chart.scrollbarX = new am4core.Scrollbar();

});

<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://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

标签： amchartsamcharts4