Question

我有两个不同类别的amchart，我从mysql数据库中以“YYYY-MM-DD HH：MM：SS”格式获取日期。我的问题是我的图表上的日期显示不正确。

  <script type="text/javascript">
       var chart;
       var graph;
        var chartData4 = [
{"year":"2014-11-05 21:16:37", "v1":7.3, "v2":99.9},
            {"year":"2014-11-05 21:17:36", "v1":7.3, "v2":99.9},
            {"year":"2014-11-05 21:18:07", "v1":7.3, "v2":99.9},
            {"year":"2014-11-05 21:30:01", "v1":7.3, "v2":99.9},
            {"year":"2014-11-05 21:45:02", "v1":7.2, "v2":99.9},
            {"year":"2014-11-05 22:00:01", "v1":7.2, "v2":99.9},
            {"year":"2014-11-05 22:15:01", "v1":7.1, "v2":99.9},
            {"year":"2014-11-05 22:30:02", "v1":7.1, "v2":99.9},
            {"year":"2014-11-05 22:45:02", "v1":7.1, "v2":99.9},
            {"year":"2014-11-05 23:00:02", "v1":7.1, "v2":99.9},
        ......

            {"year":"2014-11-07 19:45:02", "v1":5.5, "v2":96.3},
            {"year":"2014-11-07 20:00:02", "v1":5.5, "v2":96.3},
            {"year":"2014-11-07 20:15:02", "v1":5.5, "v2":97.1},
                            {"year":"2014-11-07 20:30:02", "v1":5.5, "v2":96.9}
        ];

   AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "http://allopensensors.com/amcharts/images/";
            chart.dataProvider = chartData4;
            chart.marginLeft = 10;
            chart.categoryField = "year";
            chart.dataDateFormat = "YYYY-MM-DD JJ:NN:SS";
            chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true;
            categoryAxis.minPeriod = "ss";
            categoryAxis.dashLength = 3;
            categoryAxis.minorGridEnabled = true;
            categoryAxis.minorGridAlpha = 0.1;

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.id = "ax1";
            valueAxis.axisAlpha = 0;
            valueAxis.inside = true;
            valueAxis.dashLength = 3;
            valueAxis.position = "right";
     valueAxis.title="Temperature in degree celsius" ;
            chart.addValueAxis(valueAxis);

            var valueAxis2 = new AmCharts.ValueAxis();
            valueAxis2.id = "ax2";
            valueAxis2.axisAlpha = 0;
            valueAxis2.inside = true;
            valueAxis2.dashLength = 3;
            valueAxis2.baseValue = -20;
            valueAxis2.position = "left";
  valueAxis2.title="Humidity in %";
            chart.addValueAxis(valueAxis2);

            // GRAPH
            graph = new AmCharts.AmGraph();
  graph.label="Temperature";
            graph.valueaxis = "ax1";
            graph.type = "smoothedLine";
            graph.lineColor = "#d16fff";
            graph.negativeLineColor = "#637bb6";
            graph.bullet = "square";
            graph.bulletSize = 8;
            graph.bulletBorderColor = "#FFFFFF";
            graph.bulletBorderAlpha = 1;
            graph.bulletBorderThickness = 2;
            graph.lineThickness = 2;
            graph.valueField = "v1";
            graph.title = "title v1";
            graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>";
            chart.addGraph(graph);

            graph2 = new AmCharts.AmGraph();
            graph2.valueAxis = "ax2";
            graph2.type = "smoothedLine";
            graph2.lineColor = "#d1655d";
            graph2.negativeLineColor = "#637bb6";
            graph2.bullet = "round";
            graph2.bulletSize = 8;
            graph2.bulletBorderColor = "#FFFFFF";
            graph2.bulletBorderAlpha = 1;
            graph2.bulletBorderThickness = 2;
            graph2.lineThickness = 2;
            graph2.valueField = "v2";
            graph2.title = "title v2";
            graph2.balloonText = "[[category]]<br><b><span style='font-size:14px;'>[[value]]    </span></b>";
 graph2.label="TESSST";
            chart.addGraph(graph2);

            // CURSOR
            var chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorAlpha = 0;
            chartCursor.cursorPosition = "mouse";
            chartCursor.categoryBalloonDateFormat = "JJ:NN:SS";
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);

            chart.creditsPosition = "bottom-right";

            // WRITE

            chart.write("chartdiv4");
        });
</script>

在此处查看：http://allopensensors.com/author/andreas，第三张图表，

Answer 1

在其他图表上，您有 categoryAxis.parseDates = true; 这一行注释掉，在第三张图表上是不是。这将为您提供与其他轴匹配的轴。

由于您有时间数据，因此我认为图表看起来在图表3中看起来更好。我会亲自删除其他图表中的评论以匹配此评论。

Amchart x轴日期格式

1 个答案: