如何通過輸入字段值和查詢結果更新Amcharts的數據提供者

Question

我正在使用串行類型amchart，並在dataProvider中使用了查詢結果。 現在我需要根據輸入值更改dataProvider值，因此我使用了另一個圖表。 但是圖表2並未顯示任何人向我建議更改dataProvider值的解決方案。

 <script src="https://www.amcharts.com/lib/3/amcharts.js"></script> <script src="https://www.amcharts.com/lib/3/serial.js"></script> <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> <script> /** * Define universal config */ var chartConfig = { "type": "serial", "theme": "light", "marginRight": 80, "dataProvider": [], "valueAxes": [{ "axisAlpha": 0, "position": "left", "title": "Send count by each mailer " }], "startDuration": 1, "graphs": [{ "balloonText": "<b>[[category]]: [[value]]</b>", "fillColorsField": "color", "fillAlphas": 0.9, "lineAlpha": 0.2, "type": "column", "customBulletField": "bullet", "bulletOffset": 10, "bulletSize": 52, "valueField": "visits" }], "chartCursor": { "categoryBalloonEnabled": false, "cursorAlpha": 0, "zoomable": false }, "categoryField": "country", "categoryAxis": { "gridPosition": "start", "labelRotation": 45 }, "export": { "enabled": true } }; /** * Define function for cloning objects * Taken from: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object */ function clone(obj) { var copy; // Handle the 3 simple types, and null or undefined if (null == obj || "object" != typeof obj) return obj; // Handle Date if (obj instanceof Date) { copy = new Date(); copy.setTime(obj.getTime()); return copy; } // Handle Array if (obj instanceof Array) { copy = []; for (var i = 0, len = obj.length; i < len; i++) { copy[i] = clone(obj[i]); } return copy; } // Handle Object if (obj instanceof Object) { copy = {}; for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]); } return copy; } throw new Error("Unable to copy obj! Its type isn't supported."); } /** * Create first chart */ // create a copy of the universal config var chartConfig1 = clone(chartConfig); // modify a copy of the config chartConfig1.dataProvider = [ <?php $livemailersend="select t1.emp_id,t2.isp,t2.fname,t2.iurl,sum(t1.sent),sum(t1.opens) from red_global t1, admin_emp t2 where t1.emp_id=t2.emp_id and t1.status_date between '$fromdate' and '$todate' and t1.emp_id in (2010,2015,2016,2020,2022,2023,2025,2027) group by 1,2,3,4 order by 5 desc;"; $lmailersend_fetch=mysql_query($livemailersend,$link1); $color = array("#ccff33", "#ffcc00", "#ff9933","#ff33cc","#0099ff","#00ffcc","#00cc00","#0000cc","#6b616b","#a8a36b","#c5a6ff"); $i=0; while($lmailersend=mysql_fetch_array($lmailersend_fetch)) { echo" { 'country': '".$lmailersend[2]."(".round(($lmailersend[5]/$lmailersend[4])*100 , 2) ."%)', 'visits': ".$lmailersend[4].", 'color': '".$color[$i]."', 'bullet': 'img/wxemp/".$lmailersend[3]."' },"; $i=$i+1; }?> ]; // create the chart AmCharts.makeChart("chart1", chartConfig1); /** * Create second chart */ // create a copy of the universal config var chartConfig2 = clone(chartConfig); // modify a copy of the config chartConfig2.dataProvider = [ <?php $livemailersend="select t1.emp_id,t2.isp,t2.fname,t2.iurl,sum(t1.sent),sum(t1.opens) from red_global t1, admin_emp t2 where t1.emp_id=t2.emp_id and t1.status_date between '2017-05-18' and '2017-05-31' and t1.emp_id in (2010,2015,2016,2020,2022,2023,2025,2027) group by 1,2,3,4 order by 5 desc;"; $lmailersend_fetch=mysql_query($livemailersend,$link1); $color = array("#ccff33", "#ffcc00", "#ff9933","#ff33cc","#0099ff","#00ffcc","#00cc00","#0000cc","#6b616b","#a8a36b","#c5a6ff"); $i=0; while($lmailersend=mysql_fetch_array($lmailersend_fetch)) { echo" { 'country': '".$lmailersend[2]."(".round(($lmailersend[5]/$lmailersend[4])*100 , 2) ."%)', 'visits': ".$lmailersend[4].", 'color': '".$color[$i]."', 'bullet': 'img/wxemp/".$lmailersend[3]."' },"; $i=$i+1; }?> ]; // create the chart AmCharts.makeChart("chart2", chartConfig2); </script> 

 <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> 

 <?php $fromdate = date("Ymd");; $todate = date("Ymd");; $proteam = "yah"; //-----------------------datewise live report-------------------------------------// $action =$_POST['action']; $fromdatepick =$_POST['fromdatepick']; $todatepick =$_POST['todatepick']; if(($action)=="datewise") { echo($action. "<br/>".$fromdatepick. "<br/>".$todatepick. "<br/>"); } ?> <!-- BAR Chart --> <div class="col-sm-12"> <div id="bg-default" class="panel-collapse collapse in"> <?php if(($action)!="datewise") { $where = ("and t1.status_date between '$fromdate' and '$todate'");?> <div id="chart1" class="chartdiv" style="width : 100%; height : 500px;"></div> <?php } else { $where = ("and t1.status_date between '$fromdatepick' and '$todatepick'");?> <div id="chart2" class="chartdiv" style="width : 100%; height : 500px;"></div> <?php } ?> </div> </div> 

Answer 1

考慮到變量chart已經具有圖表實例，可以執行以下操作：

chart.dataProvider = [...]; // Change or replace the array
chart.validateData(); // Refreshes the chart based on the new data

在此處查看有關validateData的更多信息