Javascript/amcharts - contrôlez dynamiquement la valeur de propriété des amcharts

J'essaye de reproduire légèrement ce que les amcharts ont fait à leur diagramme de démo dans this link ie. ajouter des contrôles pour modifier la propriété du graphique. Mais je ne peux pas comprendre comment la mise à jour de la valeur fonctionne en javascript. Voici mon code:Javascript/amcharts - contrôlez dynamiquement la valeur de propriété des amcharts

HTML:

<body> 
... 
<div id="chartdiv" style="width=100%; height:400px;"></div> 
<input type="range" min="0.1" max="1.0" value="0.5" step="0.01" id="mySlider"> 
... 
</body>

Javascript/amCharts:

<script> 
// data for amCharts 
var chartData = [ { 
    "country": "USA", 
    "visits": 4252 
    }, { 
    "country": "China", 
    "visits": 1882 
    }]; 

// drawing amCharts using object-based method 
AmCharts.ready(function() { 
    //var chart = AmCharts.makeChart("chartdiv"); 
    var chart = new AmCharts.AmSerialChart(); 
    chart.dataProvider = chartData; 
    chart.categoryField = "country"; 

    var graph = new AmCharts.AmGraph(); 
    graph.valueField = "visits"; 
    graph.type = "column"; 
    graph.fillAlphas = updateValue(); 
    chart.addGraph(graph); 

    chart.write("chartdiv") 
}); 

// here is my function to update value dynamically 
function updateValue() { 
    val = document.getElementById("mySlider").value; 
    return val; 
} 
</script>

Je veux mettre à jour l'opacité du graphique dynamique. Comment je fais ça? Cela devrait être simple mais je suis assez nouveau dans le développement de javascript.

EDIT: Mise à jour avec le code final qui fonctionne

Javascript/amCharts:

<script> 
... 
// drawing amCharts using object-based method 
AmCharts.ready(function() { 
    //var chart = AmCharts.makeChart("chartdiv"); 
    var chart = new AmCharts.AmSerialChart(); 
    chart.dataProvider = chartData; 
    chart.categoryField = "country"; 

    var graph = new AmCharts.AmGraph(); 
    graph.valueField = "visits"; 
    graph.type = "column"; 
    graph.fillAlphas = updateValue(); 
    chart.addGraph(graph); 

    chart.write("chartdiv"); 

    //add this code to add dynamic opacity control 
    //** "jquery.js" script needs to be linked **// 
    $('#mySlider').on('input change', function() { 
     //var target = chart; 
     //chart.startDuration = 0;   
     var target = chart.graphs[0] 
     target['fillAlphas'] = this.value; 
     chart.validateNow(); 
    }); 

}); 
... 
</script>

Source

2017-10-11 addicted

Essayez ce code sur l'événement de changement de votre entrée

jQuery('#mySlider').off().on('input change', function() { 
     var target = chart; 
     chart.startDuration = 0; 
     target = chart.graphs[0]; 
     target['fillAlphas'] = this.value; 
     chart.validateNow(); 
    });

Source

2017-10-11 07:11:51

Cela fonctionne pour moi bien Je me demande quelle est l'utilisation de '.off()' et les 2 premières lignes 'var target = chart; chart.startDuration = 0; '? Je parviens à faire fonctionner les changements dynamiques sans ces lignes/codes. – addicted

Javascript/amcharts - contrôlez dynamiquement la valeur de propriété des amcharts

Répondre

Questions connexes