Javascript 阿姆查特StartDuration不';行不通
我在Javascript 阿姆查特StartDuration不';行不通,javascript,jquery,mysql,Javascript,Jquery,Mysql,我在AmChart序列图表的startDuration属性上遇到问题 在加载整个页面时设置图表的代码: function setBasicPropertiesAverageScoreChart() { //Basic properties averageScoreChart = new AmCharts.AmSerialChart(); averageScoreChart.dataProvider = []; averageScoreChart.balloon.
AmChart
序列图表的startDuration
属性上遇到问题
在加载整个页面时设置图表的代码:
function setBasicPropertiesAverageScoreChart() {
//Basic properties
averageScoreChart = new AmCharts.AmSerialChart();
averageScoreChart.dataProvider = [];
averageScoreChart.balloon.textAlign = 'left';
averageScoreChart.startDuration = 1;
averageScoreChart.numberFormatter = {
precision:2,decimalSeparator:",",thousandsSeparator:"."
};
averageScoreChart.gridAboveGraphs = true;
//Graph
var graph = new AmCharts.AmGraph();
graph.balloonText = "[[balloonText]]";
graph.valueField = "score";
graph.fillColorsField = "fillcolor";
graph.type = "column";
graph.lineAlpha = 0.2;
graph.fillAlphas = 0.8;
averageScoreChart.addGraph(graph);
//CategoryAxis
var catAxis = averageScoreChart.categoryAxis;
//catAxis.gridCount = averageScoreChart.dataProvider.length;
catAxis.gridPosition = "start";
catAxis.gridAlpha = 0;
catAxis.tickPosition = "start";
catAxis.tickLength = 20;
// ValueAxis
var valueAxis = new AmCharts.ValueAxis();
valueAxis.minimum = 0;
//valueAxis.axisAlpha = 0;
valueAxis.gridAlpha = 0.2;
valueAxis.gridColor = "#FFFFF";
valueAxis.dashLength = 0;
//valueAxis.minimum = 0;
averageScoreChart.addValueAxis(valueAxis);
averageScoreChart.write('chartaveragescore');
}
我在$(文档)上调用此函数。就绪
如下:
$(document).ready(function () {
setBasicPropertiesAverageScoreChart();
setBasicPropertiesAllScoresChart();
});
实际图表的填充在另一个函数中完成,该函数在更改列表框
或其他html
元素时触发。此功能是:
function updateAverageScore() {
showLoader();
var organization = $("#organization").val();
var indicator = $("#indicators").val();
var funcid = "fill_chart_average_score";
$.getJSON('functions/getfunctions.php', {
"organization":organization,
"indicator":indicator,
"funcid":funcid},
function(dataChart) {
if (dataChart == null) {
bootbox.alert("Er ging iets fout. Probeer het nogmaals");
} else {
averageScoreChart.dataProvider = dataChart;
averageScoreChart.categoryField = "organisatie";
averageScoreChart.validateData();
}
});
hideLoader();
}
此函数最重要的目标是从MySQL
获取json
数据,并将此数据设置为图表的dataProvider
当这个函数第一次被调用时,我得到了填充图表的弹性效果,但是在第一次之后的所有变化,效果不再出现
我似乎无法理解为什么效果只在第一次执行。我找到了解决方案:在更改
数据提供程序的函数中,我再次调用设置AmChart
基本属性的函数
我现在的职能是:
function updateAverageScore() {
showLoader();
var organization = $("#organization").val();
var indicator = $("#indicators").val();
var funcid = "fill_chart_average_score";
$.getJSON('functions/getfunctions.php', {
"organization":organization,
"indicator":indicator,
"funcid":funcid},
function(dataChart) {
if (dataChart == null) {
bootbox.alert("Er ging iets fout. Probeer het nogmaals");
} else {
setBasicPropertiesAverageScoreChart();
averageScoreChart.dataProvider = dataChart;
averageScoreChart.categoryField = "organisatie";
averageScoreChart.validateData();
}
});
hideLoader();
}
这是有效的:)。我找到了解决方案:在更改数据提供程序的函数中,我再次调用设置AmChart
基本属性的函数
我现在的职能是:
function updateAverageScore() {
showLoader();
var organization = $("#organization").val();
var indicator = $("#indicators").val();
var funcid = "fill_chart_average_score";
$.getJSON('functions/getfunctions.php', {
"organization":organization,
"indicator":indicator,
"funcid":funcid},
function(dataChart) {
if (dataChart == null) {
bootbox.alert("Er ging iets fout. Probeer het nogmaals");
} else {
setBasicPropertiesAverageScoreChart();
averageScoreChart.dataProvider = dataChart;
averageScoreChart.categoryField = "organisatie";
averageScoreChart.validateData();
}
});
hideLoader();
}
这是有效的:)