Javascript 如何在amcharts的期间选择器中显示日历视图?
我正在使用amcharts中的Javascript股票图表。我想要一个下拉日历视图在点击期间选择器输入字段。有谁能帮我在“发件人”和“收件人”字段中如何制作下拉日历吗?1。您可以使用JQUERY UI日期选择器 这里有一些更好的日历,可以满足您的需要,有很好的教程和文档- 二, 三, 下面是另一个有用的日历列表-Javascript 如何在amcharts的期间选择器中显示日历视图?,javascript,codeigniter,amcharts,Javascript,Codeigniter,Amcharts,我正在使用amcharts中的Javascript股票图表。我想要一个下拉日历视图在点击期间选择器输入字段。有谁能帮我在“发件人”和“收件人”字段中如何制作下拉日历吗?1。您可以使用JQUERY UI日期选择器 这里有一些更好的日历,可以满足您的需要,有很好的教程和文档- 二, 三, 下面是另一个有用的日历列表- 添加此代码,它将帮助您 chart.addListener('rendered' ,function (event){ $( ".a
添加此代码,它将帮助您
chart.addListener('rendered' ,function (event){
$( ".amChartsPeriodSelector .amChartsInputField" ).datepicker({
dateFormat: "dd-mm-yy",
//minDate: newStartDate,
//maxDate: newEndDate,
onClose: function() {
$(".amChartsPeriodSelector .amChartsInputField" ).trigger('blur');
}
});
});
`@user3094124:Hi,我使用的代码与我的代码相同, 这是我为amChart编写的脚本,首先检查它是否显示已更改的警报,您必须使用jquery ui liabrary。 `
`它显示了一个错误“Uncaught TypeError:Object#has no method'datepicker'”,当用作上述脚本时,我已经包含了jquery-ui.js库来使用以下链接`上述代码仅在我有一个面板的情况下有效,但我在一个图形中有三个面板,因此如果我放入addListener,它不会显示两个较低的图形面板
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");
});