[英]How to display calendar view in period selector of amcharts?
I'm using Javascript Stock Chart from amcharts. 我正在使用来自amcharts的Javascript股票图表。 I want a dropdown calendar view in click of period selector input field.
我想要单击时段选择器输入字段中的下拉日历视图。 Please can anyone help me how can I make drop-down calendar in from and to fields here?
请任何人能帮助我,如何在此处的往返字段中制作下拉日历?
Add this code , it will help you 添加此代码,它将为您提供帮助
chart.addListener('rendered' ,function (event){
$( ".amChartsPeriodSelector .amChartsInputField" ).datepicker({
dateFormat: "dd-mm-yy",
//minDate: newStartDate,
//maxDate: newEndDate,
onClose: function() {
$(".amChartsPeriodSelector .amChartsInputField" ).trigger('blur');
}
});
});
` `
@user3094124 : Hi, I am using same code it works for me, Here is my script for amChart, first check if it shows alert on changed or not and you have to use <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
jquery ui liabrary. @ 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");
});
` `
1.You can use JQUERY UI Date picker. 1.您可以使用JQUERY UI日期选择器。
http://jqueryui.com/datepicker/ http://jqueryui.com/datepicker/
Here are few more good calenders, meet your needs, with good tutorial & docs- 这里有一些优质的压光机,可以满足您的需求,并提供优质的教程和文档-
2. http://keith-wood.name/datepick.html 2. http://keith-wood.name/datepick.html
3. http://www.eyecon.ro/datepicker/ 3. http://www.eyecon.ro/datepicker/
Here is another list of useful calendars- 这是有用的日历的另一个列表-
http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/ http://www.webdesignbooth.com/9-useful-jquery-calendar-and-date-picker-plugins-for-web-designers/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.