gpt4 book ai didi

javascript - Amchart 更改标签的日期格式

转载 作者:行者123 更新时间:2023-12-03 05:05:55 25 4
gpt4 key购买 nike

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

如果您运行代码并向下滚动并将鼠标悬停在图表上,它将显示(2012年8月1日或2012年9月1日或2012年10月1日)

我似乎找不到更改该值的方法,因此它只显示月份(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>

最佳答案

您可以修改图表光标的 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>

关于javascript - Amchart 更改标签的日期格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42003073/

25 4 0