Amchart更改标签的日期格式

Question

我正在使用AmChart 显示我的图表以及来自我的服务器的信息。

如果您运行代码并向下滚动并将图表悬停，它将显示(Aug 01, 2012 OR Sep 01, 2012 OR Oct 01, 2012)

我似乎找不到改变值的方法，所以它只显示月份(Aug OR Sep OR Oct)

有人知道怎么解决吗？

var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginLeft": 60,
  "marginButtom": 70,
  "autoMarginOffset": 20,
  "dataDateFormat": "YYYY-MM",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "allLabels": [{
    "text": "Index / mio",
    "bold": true,
    "x": 20,
    "y": height,
    "rotation": "270"
  }, {
    "text": "Index / mio",
    "bold": true,
    "x": width / 1.2,
    "y": (height * 2) - 20
  }],
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:10px;'>[[value]]</span>"
  }],
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "dataProvider": [{
    "date": "2012-08",
    "value": 13
  }, {
    "date": "2012-09",
    "value": 22
  }, {
    "date": "2012-10",
    "value": 23
  }]
});

#chartdiv {
  width: 500px;
  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>

Answer 1

您可以将chartCursor的categoryBalloonDateFormat属性中的格式字符串修改为"MMM"，而不是默认的"MMM DD, YYYY"。

  "chartCursor": {
    "categoryBalloonDateFormat": "MMM",
    // ...
  }

以下更新演示：

var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginLeft": 60,
  "marginButtom": 70,
  "autoMarginOffset": 20,
  "dataDateFormat": "YYYY-MM",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "allLabels": [{
    "text": "Index / mio",
    "bold": true,
    "x": 20,
    "y": height,
    "rotation": "270"
  }, {
    "text": "Index / mio",
    "bold": true,
    "x": width / 1.2,
    "y": (height * 2) - 20
  }],
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
    },
    "labelText": "[[category]]",
    "labelPosition": "bottom",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:10px;'>[[value]]</span>"
  }],
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
    "categoryBalloonDateFormat": "MMM"
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "dataProvider": [{
    "date": "2012-08",
    "value": 13
  }, {
    "date": "2012-09",
    "value": 22
  }, {
    "date": "2012-10",
    "value": 23
  }]
});

#chartdiv {
  width: 500px;
  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>