AmChart StartDuration不起作用

时间:2016-04-21 07:22:46

标签: javascript jquery mysql

我在使用startDuration序列图表的AmChart属性时遇到问题。

我在加载整个页面时设置图表的代码:

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上调用此函数,如下所示:

$(document).ready(function () {
    setBasicPropertiesAverageScoreChart();
    setBasicPropertiesAllScoresChart();       
});

实际图表的填充是在更改listbox或其他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();
}

此功能最重要的目标是从json获取MySQL数据,并将此数据设置为图表的dataProvider

第一次调用此函数时,我得到了图表填充的弹性效果,但是第一次之后的所有变化,效果都不再出现了。

我似乎无法弄清楚为什么效果仅在第一次执行。

1 个答案:

答案 0 :(得分:0)

我找到了解决方案:在更改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();
}

这有效:)。