Question

我有一个AmSerialChart，其中有三个AmGraph，我已经格式化了这样的balloonText：

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

类别（x值）的问题也在balloonText中显示，格式如下：“MMM DD，YYYY”。如何以其他方式显示此日期？

我已经检查了categoryaxis和dateFormats中的dataDateFormat，但这只会更改底部值。

到目前为止，这是完整的代码：

   <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>

Answer 1

好问题，这有助于我发现我在文档中缺少一个属性。如果您不使用ChartCursor，则应使用chart.balloonDateFormat属性格式化日期。

使用amCharts以x轴值显示日期

1 个答案: