微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何将周数读入 amCharts?

如何解决如何将周数读入 amCharts?

我不知道如何通过设置 chart.dateFormatter.inputDateFormat 来让 amCharts 读取带有周数而不是确切天数的数据。一个月中的一周 (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,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,4,24,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",from: "1 Feb",to: "2 Mar",from: "1 Apr",to: "1 May",from: "3 Jul",to: "1 Nov",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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。