从 amchart 更改股票图表中的日期格式
Changing dateformat in stockcharts from amchart
我从 amchart 创建了一个股票图表并将其保存在这里:jsfiddle
现在我想将 (a) 图表光标的日期格式更改为 "DD.MM.YYYY" 和 (b) 将类别轴的日期格式更改为德语格式,例如“01.Mai 2018”。我假设 (a) 可以用 "categoryBalloonDateFormat" 以某种方式解决,但我无法找到正确的放置位置。
chart.ChartCursor.categoryBalloonDateFormat = "DD.MM.YYYY";
不幸的是,这不起作用。
对于(b)我完全没有头绪
对于 (a),您必须在 chartCursorSettings.categoryBalloonDateFormats
数组中针对图表中显示的所需时间段设置它。如果您的数据是每日的,至少设置 DD 和 WW 周期(每日和每周),但根据数据量,您可能还想设置 MM(每月)周期。例如:
chart.chartCursorSettings.categoryBalloonDateFormats = [
{period:"YYYY", format:"YYYY"},
{period:"MM", format:"MMM, YYYY"},
{period:"WW", format:"DD.MM.YYYY"},
{period:"DD", format:"DD.MM.YYYY"},
{period:"hh", format:"JJ:NN"},
{period:"mm", format:"JJ:NN"},
{period:"ss", format:"JJ:NN:SS"},
{period:"fff", format:"JJ:NN:SS"}
]
与 (b) 类似,您必须以与 categoryBalloonDateFormats
:
相同的方式设置 categoryAxesSettings.dateFormats
数组
chart.categoryAxesSettings.dateFormats = [
{period:"YYYY", format:"YYYY"},
{period:"MM", format:"MMM, YYYY"},
{period:"WW", format:"DD.MM.YYYY"},
{period:"DD", format:"DD.MM.YYYY"},
{period:"hh", format:"JJ:NN"},
{period:"mm", format:"JJ:NN"},
{period:"ss", format:"JJ:NN:SS"},
{period:"fff", format:"JJ:NN:SS"}
]
演示:
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"dateFormats": [{
period: "YYYY",
format: "YYYY"
},
{
period: "MM",
format: "DD.MM.YYYY"
},
{
period: "WW",
format: "DD.MM.YYYY"
},
{
period: "DD",
format: "DD.MM.YYYY"
},
{
period: "hh",
format: "JJ:NN"
},
{
period: "mm",
format: "JJ:NN"
},
{
period: "ss",
format: "JJ:NN:SS"
},
{
period: "fff",
format: "JJ:NN:SS"
}
]
},
"chartCursorSettings": {
"categoryBalloonDateFormats": [{
period: "YYYY",
format: "YYYY"
},
{
period: "MM",
format: "DD.MM.YYYY"
},
{
period: "WW",
format: "DD.MM.YYYY"
},
{
period: "DD",
format: "DD.MM.YYYY"
},
{
period: "hh",
format: "JJ:NN"
},
{
period: "mm",
format: "JJ:NN"
},
{
period: "ss",
format: "JJ:NN:SS"
},
{
period: "fff",
format: "JJ:NN:SS"
}
],
"valueBalloonsEnabled": true
},
"dataSets": [{
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": generateChartData(),
"categoryField": "date"
}],
"panels": [{
"stockGraphs": [{
"valueField": "value",
"type": "smoothedLine"
}]
}]
});
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 30; i++) {
var newDate = new Date(firstDate);
newDate.setDate(i);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: a
});
}
return chartData;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
谢谢 - 成功了!此外,如果有人想将月份名称更改为另一种语言:
AmCharts.monthNames = [
'Januar',
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember'];
AmCharts.shortMonthNames = [
'Jan.',
'Feb.',
'März',
'April',
'Mai',
'Juni',
'Juli',
'Aug.',
'Sept.',
'Okt.',
'Nov.',
'Dez.'];
我从 amchart 创建了一个股票图表并将其保存在这里:jsfiddle
现在我想将 (a) 图表光标的日期格式更改为 "DD.MM.YYYY" 和 (b) 将类别轴的日期格式更改为德语格式,例如“01.Mai 2018”。我假设 (a) 可以用 "categoryBalloonDateFormat" 以某种方式解决,但我无法找到正确的放置位置。
chart.ChartCursor.categoryBalloonDateFormat = "DD.MM.YYYY";
不幸的是,这不起作用。
对于(b)我完全没有头绪
对于 (a),您必须在 chartCursorSettings.categoryBalloonDateFormats
数组中针对图表中显示的所需时间段设置它。如果您的数据是每日的,至少设置 DD 和 WW 周期(每日和每周),但根据数据量,您可能还想设置 MM(每月)周期。例如:
chart.chartCursorSettings.categoryBalloonDateFormats = [
{period:"YYYY", format:"YYYY"},
{period:"MM", format:"MMM, YYYY"},
{period:"WW", format:"DD.MM.YYYY"},
{period:"DD", format:"DD.MM.YYYY"},
{period:"hh", format:"JJ:NN"},
{period:"mm", format:"JJ:NN"},
{period:"ss", format:"JJ:NN:SS"},
{period:"fff", format:"JJ:NN:SS"}
]
与 (b) 类似,您必须以与 categoryBalloonDateFormats
:
categoryAxesSettings.dateFormats
数组
chart.categoryAxesSettings.dateFormats = [
{period:"YYYY", format:"YYYY"},
{period:"MM", format:"MMM, YYYY"},
{period:"WW", format:"DD.MM.YYYY"},
{period:"DD", format:"DD.MM.YYYY"},
{period:"hh", format:"JJ:NN"},
{period:"mm", format:"JJ:NN"},
{period:"ss", format:"JJ:NN:SS"},
{period:"fff", format:"JJ:NN:SS"}
]
演示:
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"categoryAxesSettings": {
"dateFormats": [{
period: "YYYY",
format: "YYYY"
},
{
period: "MM",
format: "DD.MM.YYYY"
},
{
period: "WW",
format: "DD.MM.YYYY"
},
{
period: "DD",
format: "DD.MM.YYYY"
},
{
period: "hh",
format: "JJ:NN"
},
{
period: "mm",
format: "JJ:NN"
},
{
period: "ss",
format: "JJ:NN:SS"
},
{
period: "fff",
format: "JJ:NN:SS"
}
]
},
"chartCursorSettings": {
"categoryBalloonDateFormats": [{
period: "YYYY",
format: "YYYY"
},
{
period: "MM",
format: "DD.MM.YYYY"
},
{
period: "WW",
format: "DD.MM.YYYY"
},
{
period: "DD",
format: "DD.MM.YYYY"
},
{
period: "hh",
format: "JJ:NN"
},
{
period: "mm",
format: "JJ:NN"
},
{
period: "ss",
format: "JJ:NN:SS"
},
{
period: "fff",
format: "JJ:NN:SS"
}
],
"valueBalloonsEnabled": true
},
"dataSets": [{
"fieldMappings": [{
"fromField": "value",
"toField": "value"
}],
"dataProvider": generateChartData(),
"categoryField": "date"
}],
"panels": [{
"stockGraphs": [{
"valueField": "value",
"type": "smoothedLine"
}]
}]
});
function generateChartData() {
var chartData = [];
var firstDate = new Date(2012, 0, 1);
firstDate.setDate(firstDate.getDate() - 1000);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 30; i++) {
var newDate = new Date(firstDate);
newDate.setDate(i);
var a = Math.round(Math.random() * (40 + i)) + 100 + i;
chartData.push({
date: newDate,
value: a
});
}
return chartData;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
谢谢 - 成功了!此外,如果有人想将月份名称更改为另一种语言:
AmCharts.monthNames = [
'Januar',
'Februar',
'März',
'April',
'Mai',
'Juni',
'Juli',
'August',
'September',
'Oktober',
'November',
'Dezember'];
AmCharts.shortMonthNames = [
'Jan.',
'Feb.',
'März',
'April',
'Mai',
'Juni',
'Juli',
'Aug.',
'Sept.',
'Okt.',
'Nov.',
'Dez.'];