使用amCharts以x轴值显示日期

Display date in x Axis value using amCharts

本文关键字:显示 日期 amCharts 使用      更新时间:2024-01-27

我有一个AmSerialChart,上面有三个AmGraph,我格式化了气球文本,如下所示:

grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";

类别(x值)的问题也显示在气球文本中,格式如下:"MMM DD,YYYY"。如何以其他方式显示此日期?

我已经检查了categoryaxis中的dateFormatsdataDateFormat,但这只会更改底部值。

以下是迄今为止的完整代码:

   <script src="amcharts/amcharts.js" type="text/javascript"></script>
    <script src="amcharts/serial.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chart;
        var chartData = <% properties.get("jsonData") %>;
        var chartTitles = <% properties.get("jsonTitles") %>;
        AmCharts.ready(function () {
            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];


            // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
//               chart.addListener("dataUpdated", zoomChart);
            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "ss";
            categoryAxis.minorGridEnabled = true;
            categoryAxis.axisColor = "#DADADA";
//            categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];
            var vAxis = new AmCharts.ValueAxis();
            chart.addValueAxis(vAxis);
            for (var i = 0; i < chartTitles.length; i++) {
                var grp = new AmCharts.AmGraph();
                grp.valueField = "d"+i;
                grp.title = chartTitles[i];
                grp.type = "line";
                grp.valueAxis = vAxis; // indicate which axis should be used 
                grp.lineThickness = 1;
                grp.bullet = "round";
                grp.labelPosition = "right";
                grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";
                grp.balloonText = "[[value]], [[description]], [[percents]], [[open]], [[total]], [[category]]";
                grp.showBalloon = true;
                grp.bulletSize = 1;
                grp.bulletBorderThickness = 6;
                grp.dashLengthField = "dashLength";
                chart.addGraph(grp);
            }

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);
            // LEGEND
            var legend = new AmCharts.AmLegend();
            legend.marginLeft = 180;
            legend.useGraphSettings = true;
            chart.addLegend(legend);
            // WRITE
            chart.write("chartdiv");
        });


    </script>
    <div id="chartdiv" style="width: 100%; height: 360px;"></div>

好问题,帮助我发现文档中缺少属性。如果不使用ChartCursor,则应使用chart.alloonDateFormat属性来格式化日期。