Question

我正在使用串行类型amchart并在dataProvider中使用查询结果。现在我需要根据输入值更改dataProvider值，因此我使用了另一个图表。但是图表2没有显示任何人建议我改变dataProvider值的解决方案。

<div id="wrapper">
  <div class="quote">Chuck Norris counted to infinity... Twice.</div>
  <div class="quote">Chuck Norris has already been to Mars; that's why there are no signs of life there.</div>
  <div class="quote">Guns don't kill people. Chuck Norris kills People.</div>
  <div class="quote">There is no theory of evolution. Just a list of animals Chuck Norris allows to live.</div>
  <div class="quote">Chuck Norris uses pepper spray to spice up his steaks.</div>
</div>
<button id='randomize'>Randomize</button>

<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" />

Answer 1

考虑到您已在变量chart中拥有图表实例，您可以执行以下操作：

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

See more about validateData here

如何通过输入字段值和查询结果更新Amcharts的数据提供者

1 个答案: