标签的Amchart更改日期格式

Question

I'm using AmChart do display my chart with the information from my server.

If you run the code and scroll down and hover the chart it will display (Aug 01, 2012 OR Sep 01, 2012 OR Oct 01, 2012)

I'cant seem to find a way to change the value so it only display the month (Aug OR Sep OR Oct)

Does anyome know how to fix that?

 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

You can modify the format string in the chartCursor's categoryBalloonDateFormat property to "MMM" instead of the default "MMM DD, YYYY" .

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

Updated demo below:

 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>