javascript - 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>