javascript - AmChart StartDuration 不起作用

Question

我在使用 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 上调用这个函数是这样的:

$(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();
}

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

当第一次调用这个函数时，我得到了图表填充的弹跳效果，但是第一次之后的所有变化，效果都没有出现了。

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

Answer 1

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

这有效:).