如何在 amcharts 的周期选择器中显示日历视图？答案

【问题标题】：How to display calendar view in period selector of amcharts?如何在 amcharts 的周期选择器中显示日历视图？
【发布时间】：2014-07-28 20:57:56
【问题描述】：

我正在使用 amcharts 的 Javascript 股票图表。我想要在单击期间选择器输入字段时的下拉日历视图。请任何人帮助我如何在 from 和 to 字段中制作下拉日历？

【问题讨论】：

标签： javascript codeigniter amcharts

【解决方案1】：

@user3094124：嗨，我使用的代码与它相同，这是我的 amChart 脚本，首先检查它是否在更改时显示警报，您必须使用 <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script> jquery ui 库。 `

     AmCharts.ready(function() {
        var chart = new AmCharts.AmStockChart();
        chart.pathToImages = "/amcharts/amcharts/images/";

        var dataSet = new AmCharts.DataSet();
        dataSet.dataProvider = chartDataS;
        dataSet.fieldMappings = [{fromField:"val", toField:"value"}];
        dataSet.categoryField = "date";
        chart.dataSets = [dataSet];

        var stockPanel = new AmCharts.StockPanel();
        chart.panels = [stockPanel];

        var legend = new AmCharts.StockLegend();
        stockPanel.stockLegend = legend;

        var panelsSettings = new AmCharts.PanelsSettings();
        panelsSettings.startDuration = 5;
        chart.panelsSettings = panelsSettings;

        var graph = new AmCharts.StockGraph();
        graph.valueField = "value";
        graph.type = "column";
        graph.title = "Users ";
        graph.fillAlphas = 1;
        stockPanel.addStockGraph(graph);

        var categoryAxesSettings = new AmCharts.CategoryAxesSettings();
        categoryAxesSettings.dashLength = 1;
        chart.categoryAxesSettings = categoryAxesSettings;

        var valueAxesSettings = new AmCharts.ValueAxesSettings();
        valueAxesSettings .dashLength = 1;
        chart.valueAxesSettings  = valueAxesSettings;

        var chartScrollbarSettings = new AmCharts.ChartScrollbarSettings();
        chartScrollbarSettings.graph = graph;
        chartScrollbarSettings.graphType = "line";
        chart.chartScrollbarSettings = chartScrollbarSettings;

        var chartCursorSettings = new AmCharts.ChartCursorSettings();
        chartCursorSettings.valueBalloonsEnabled = true;
        //chartCursorSettings.fullWidth = true;
        chart.chartCursorSettings = chartCursorSettings;

        var periodSelector = new AmCharts.PeriodSelector();
        periodSelector.periods = [{period:"DD", count:1, label:"1 day"},
            {period:"DD", selected:true, count:5, label:"5 days"},
            {period:"MM", count:1, label:"1 month"},
            {period:"YYYY", count:1, label:"1 year"},
            {period:"YTD", label:"YTD"},
            {period:"MAX", label:"MAX",selected:true}];
        periodSelector.position = "top";
        chart.periodSelector = periodSelector;

        /*chart.periodSelector.addListener('changed', function(){
         alert('changed');
         $( ".amChartsPeriodSelector .amChartsInputField" ).datepicker({
         dateFormat: "dd-mm-yy"
         });
         });*/

        chart.addListener('rendered' ,function (event){

            $( ".amChartsPeriodSelector .amChartsInputField" ).datepicker({
                dateFormat: "dd-mm-yy",
                //minDate: newStartDate,
                //maxDate: newEndDate,
                onClose: function() {
                    $(".amChartsPeriodSelector .amChartsInputField" ).trigger('blur');
                }
            });
        });


        chart.write("StockChartDiv");


    });

【讨论】：

它显示错误“Uncaught TypeError: Object #
使用以下链接 `
以上代码仅在我有单个面板但我在单个图形中有三个面板时才有效，所以如果我放置 addListener 它不会显示两个较低的图形面板

【解决方案2】：

添加此代码，它将帮助您

            chart.addListener('rendered' ,function (event){ 
            $( ".amChartsPeriodSelector .amChartsInputField" ).datepicker({
                dateFormat: "dd-mm-yy",
                //minDate: newStartDate,
                //maxDate: newEndDate,
                onClose: function() {
                    $(".amChartsPeriodSelector .amChartsInputField" ).trigger('blur');
                }
            });
        });

【讨论】：

【解决方案3】：

1.您可以使用 JQUERY UI 日期选择器。

http://jqueryui.com/datepicker/

这里有一些更好的日历，满足您的需求，有很好的教程和文档-

2.http://keith-wood.name/datepick.html

3.http://www.eyecon.ro/datepicker/

这是另一个有用的日历列表-

http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/

【讨论】：