Amcharts类别轴也显示空数据的日期

Question

我正在制作关于一天吃的水果的图表，这在下面的例子中正常工作。

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "hideCredits": true,
  "fixedColumnWidth": '10px',

  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [{
      "creationDate": "04/09/18",
      "Banana": 1,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "06/09/18",
      "Banana": 10,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "08/09/18",
      "Banana": 11,
      "Apple": 13,
      "Grapes": 24
    },
    {
      "creationDate": "09/09/18",
      "Banana": 1,
      "Apple": 50,
      "Grapes": 24
    },
  ],

  //"gridAboveGraphs": true,
  "startDuration": 1,

  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0,
    "minimum": 0,
    "maximum": 50,
    "gridCount": 1

  }],
  "graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#47b012",
    "lineColor": "#47b012",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Grapes Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Grapes",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#fff138",
    "lineColor": "#fff138",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Banana Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Banana",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#dd111b",
    "lineColor": "#dd111b",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Apples Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Apple",
    "fixedColumnWidth": 25
  }],
  "categoryField": "creationDate",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left",
    "labelRotation": 80,
  },
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

但我需要的是显示当天没有吃水果的数据，如下面的截图所示。

日期05-09-2018和07-09-2018数据不在dataprovider字段中，因此我希望它自动填充到图表中。

Answer 1

您当前有一个常规的类别轴，它将日期视为字符串（类别）。

如果你想要一个真实的日期比例，你需要通过在parseDates: true中设置categoryAxis使它成为一个基于日期的类别轴。

但这还不够。

由于您的日期为非标准日期格式，因此您需要指示amCharts如何解析它们。这就是dataDateFormat设置的地方：

dataDateFormat: "DD/MM/YYYY"

最后，标签遵循基于日期的轴上的不同规则。因此，我们需要对代码进行一些调整，以便显示所有代码：

"categoryAxis": {
  // ...
  "autoGridCount": false,
  "gridCount": 20
},

这是你的图表：

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "hideCredits": true,
  "fixedColumnWidth": '10px',
  "dataDateFormat": "DD/MM/YYYY",

  "legend": {
    "horizontalGap": 10,
    "maxColumns": 1,
    "position": "right",
    "useGraphSettings": true,
    "markerSize": 10
  },
  "dataProvider": [{
      "creationDate": "04/09/18",
      "Banana": 1,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "06/09/18",
      "Banana": 10,
      "Apple": 13,
      "Grapes": 24
    },

    {
      "creationDate": "08/09/18",
      "Banana": 11,
      "Apple": 13,
      "Grapes": 24
    },
    {
      "creationDate": "09/09/18",
      "Banana": 1,
      "Apple": 50,
      "Grapes": 24
    },
  ],

  //"gridAboveGraphs": true,
  "startDuration": 1,

  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0.3,
    "gridAlpha": 0,
    "minimum": 0,
    "maximum": 50,
    "gridCount": 1

  }],
  "graphs": [{
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#47b012",
    "lineColor": "#47b012",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Grapes Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Grapes",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#fff138",
    "lineColor": "#fff138",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Banana Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Banana",
    "fixedColumnWidth": 25
  }, {
    "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>",
    "fillColors": "#dd111b",
    "lineColor": "#dd111b",
    "fillAlphas": 0.8,
    "labelText": "[[value]]",
    "lineAlpha": 0.3,
    "title": "Apples Eaten",
    "type": "column",
    "color": "#000000",
    "valueField": "Apple",
    "fixedColumnWidth": 25
  }],
  "categoryField": "creationDate",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left",
    "labelRotation": 80,
    "parseDates": true,
    "autoGridCount": false,
    "gridCount": 20
  },
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>