【问题标题】:AmCharts v4 linechart, starts dateaxis 1 month lateAmCharts v4 折线图,晚 1 个月开始日期轴
【发布时间】:2020-01-30 11:13:39
【问题描述】:

使用 amcharts 4 我正在显示一个 xy 图表(简单的折线图)。每个数据点都有chart.data中的数据集,第一个as和后面的间隔为1周:

{
   "Date": new Date(2015, 12, 31), 
   "Value: 12345,
   "LineColor: "#000000"
}, {
   "Date": new Date(2016, 01, 07), 
   "Value: 234567,
   "LineColor: "#000000"
}

尽管如此,图表上显示的第一个 dateAxis 点是(格式化后)Sun 31 Jan 2016,它不在输入的日期中。

如果我将 dateAxis.baseInterval 更改为 timeUnit: "week", count: 1 我会得到 2016 年 1 月 28 日,这是输入日期之一,但从顶部算起第 5 个。

我一直在寻找与此问题类似的东西,但这似乎不是一个常见的问题。我是否错过了一些强制日期轴实际使用日期输入的代码?

对不起,缺少代码示例,如果需要我可以包含更多,但目前它在一个僻静的机器上。

【问题讨论】:

    标签: javascript date axis-labels amcharts4


    【解决方案1】:

    请注意,您的第一个日期不是 12 月。 JavaScript Date API 中的月份是从 0 到 11,这解释了为什么它被设置为一月,而第二个日期是二月。

    如果您希望轴的粒度更细,请将 baseInterval 设置为一天而不是一周/七天:

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

    如果您只想显示数据中的标签,请将 skipEmptyPeriods 也设置为 true。

    dateAxis.skipEmptyPeriods = true;
    

    下面的演示:

    var chart = am4core.create("chartdiv", am4charts.XYChart);
    
    chart.data = generateData();
    
    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.minGridDistance = 50;
    dateAxis.baseInterval = {
      "timeUnit": "day",
      "count": 1
    };
    dateAxis.skipEmptyPeriods = true;
    
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = "value";
    series.dataFields.dateX = "date";
    series.tooltipText = "{dateX}: [b]{valueY}[/]";
    series.strokeWidth = 2; 
    
    function generateData() {
      var data = [];
      var firstDate = new Date(2015, 11, 31);
      var i;
      for (i = 0;  i < 15;  ++i) {
        var nextDate = new Date(firstDate);
        nextDate.setDate(nextDate.getDate() + (7 * i));
        data.push({
          "date": nextDate,
          "value": Math.floor(Math.random() * 100 + 1 * i)
        });
      }
      return data;
    }
    
    chart.cursor = new am4charts.XYCursor();
    #chartdiv {
      width: 100%;
      height: 350px;
    }
    <script src="//www.amcharts.com/lib/4/core.js"></script>
    <script src="//www.amcharts.com/lib/4/charts.js"></script>
    <div id="chartdiv"></div>

    【讨论】:

    • 非常感谢您的回答。与此同时,我恢复使用处理它的日期格式 yyyy-MM-dd,但是,您的粒度数据和 dateAxis.skipEmptyPeriods = true; 解决了我一直在处理的另一个难题,并删除了很多“解决方法代码”从试图准确处理这解决的问题。另外,感谢您指出日期从 0 到 11,(我不知道...)。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多