javascript AmChart x 轴数据日期格式以显示每天的小时、分钟和秒值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22209619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AmChart x axis data date formatting to display per day values with hours minutes and seconds
提问by Greg
I am trying to create a chart which the data is time related. I would like to give to each bullet the year, month, day, hours, minutes and seconds. But I would like the X axis to not show the minutes and seconds if the users zooms in.
我正在尝试创建一个数据与时间相关的图表。我想给每个项目符号年、月、日、小时、分钟和秒。但如果用户放大，我希望 X 轴不显示分钟和秒。
My question: what is the date format that I have to specify to chart.dataDateFormat and to the "date" parameter of my data?
我的问题：我必须为 chart.dataDateFormat 和数据的“date”参数指定的日期格式是什么？
Here is my code so far. Please let me know what I should change. Thank you.
到目前为止，这是我的代码。请让我知道我应该改变什么。谢谢你。
<script type="text/javascript">
var chart;
var chartData = [
{
"date": "2012-01-01",
"value": 0.24
},
{
"date": "2012-01-02",
"value": 0.28
},
{
"date": "2012-01-03",
"value": 0.34
},
{
"date": "2012-01-04",
"value": 0.30
},
{
"date": "2012-01-05",
"value": 0.27
}
];
AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "/images/";
chart.dataProvider = chartData;
chart.dataDateFormat = "YYYY-MM-DD";
chart.categoryField = "date";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "hh"; // our data is daily, so we set minPeriod to DD
categoryAxis.gridAlpha = 0.1;
categoryAxis.minorGridAlpha = 0.1;
categoryAxis.axisAlpha = 0;
categoryAxis.minorGridEnabled = true;
categoryAxis.inside = true;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.tickLength = 0;
valueAxis.axisAlpha = 0;
valueAxis.showFirstLabel = false;
valueAxis.showLastLabel = false;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.dashLength = 3;
graph.lineColor = "gray";
graph.valueField = "value";
graph.dashLength = 3;
graph.bullet = "round";
graph.lineThickness = 0;
graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>";
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chart.addChartCursor(chartCursor);
// SCROLLBAR
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
// HORIZONTAL GREEN RANGE
var guide = new AmCharts.Guide();
guide.value = 0.26;
guide.toValue = 0.32;
guide.fillColor = "#00CC00";
guide.inside = true;
guide.fillAlpha = 0.2;
guide.lineAlpha = 0;
valueAxis.addGuide(guide);
// TREND LINES
// first trend line
var trendLine = new AmCharts.TrendLine();
// note,when creating date objects 0 month is January, as months are zero based in JavaScript.
trendLine.initialDate = new Date(2012, 0, 1, 0,59); // 12 is hour - to start trend line in the middle of the day
trendLine.finalDate = new Date(2012, 0, 23, 24);
trendLine.initialValue = 0.28;
trendLine.finalValue = 0.28;
trendLine.lineColor = "#CC0000";
chart.addTrendLine(trendLine);
// WRITE
chart.write("chartdiv");
});
</script>
回答by Greg
I finally figured it out myself overnight. I put the solution for the people who would look for it.
我终于在一夜之间想通了。我为那些寻找它的人提供了解决方案。
The chartData must be:
图表数据必须是：
{ "date": "2014-03-01, 08:05:05", "value": 0.25 }
{ "日期": "2014-03-01, 08:05:05", "value": 0.25 }
The chart.dataDateFormat must be:
chart.dataDateFormat 必须是：
chart.dataDateFormat = "YYYY-MM-DD, JJ:NN:SS";
chart.dataDateFormat = "YYYY-MM-DD, JJ:NN:SS";
Hope it helps someone.
希望它可以帮助某人。
