Question

我正在尝试创建 <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>  <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed">Click here to <strong>Toggle (show/hide)</strong> description</a>条形图。我有以下json来自json：

amcharts

我按如下方式调用ajax：

[
        { "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"},
        { "option": "Ireland", "percentage": 131.10,"color":"#ff9900"},
        { "option": "Germany", "percentage": 115.80,"color":"#448800"},
        { "option": "Australia", "percentage": 109.90,"color":"#2175d9"},
        { "option": "Austria", "percentage": 108.30,"color":"#2175d9"},
        { "option": "UK", "percentage": 99.00,"color":"#2175d9"}
    ]

我的fetchpollresult.php页面如下所示：

$("#viewResult").click(function(){

       $("#chart").show();

       var qstnId = $("div[name='pollqstn']").attr("id");
       //Ajax to load all poll results
       $.post("fetchpollresult.php", {qstnid: qstnId}, function (data) {
           drawStuff(data);
       });


   });

我得到了回复：

$questionid = $_REQUEST['qstnid'];

 $arranstext = array();
 $arranscount = array();

 $arranscolours = array("#2175d9","#448800","#448800","#ff9900");


//find qstn text
$pollqstndetails = $DB->get_records('epoll_questions', array('id' => $questionid));


$optiondetails = $DB->get_records('epoll_answers', array('questionid' => $questionid));

foreach($optiondetails as $optval){

 $optionresponseCount = $DB->get_records('epoll_responses', array('answerid' => $optval->id,'questionid'=>$questionid));   

 $countOptresponse =  count($optionresponseCount);


 array_push($arranstext ,$optval->answertext);
 array_push($arranscount ,count($optionresponseCount));

}


 $data =array();

for($i=0;$i<count($arranstext);$i++){

$data[]  = array('option' =>$arranstext[$i],'percentage'=>$arranscount[$i],'color'=>$arranscolours[$i]) ;
}

$optionnoresponseCount = $DB->get_records('epoll_responses', array('answerid' => 0,'questionid'=>$questionid));   

$data[]  = array('option' =>"NA",'percentage'=>count($optionnoresponseCount),'color'=>"#ff9900") ;


echo json_encode($data);

但在这种情况下，它无法正常工作。当我在同一页面上对其进行硬编码时，它可以正常工作。

我的理解是：

        [
            { "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"},
            { "option": "Ireland", "percentage": 131.10,"color":"#ff9900"},
            { "option": "Germany", "percentage": 115.80,"color":"#448800"},
            { "option": "Australia", "percentage": 109.90,"color":"#2175d9"},
            { "option": "Austria", "percentage": 108.30,"color":"#2175d9"},
            { "option": "UK", "percentage": 99.00,"color":"#2175d9"}
        ]


Than I have a function calling in ajax response:

   function drawStuff(val){ 


    // RADAR CHART
    chart = new AmCharts.AmSerialChart();
chartData =val; //assigning ajax response
    chart.dataProvider = chartData;
    chart.categoryField = "option";
    chart.startDuration = 3;
    chart.sequencedAnimation = false;

    // VALUE AXIS
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.axisAlpha = 0.15;
    valueAxis.minimum = 0;
    valueAxis.dashLength = 3;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.type = "column";
    graph.colorField = "color"
    graph.valueField = "percentage";
    graph.fillAlphas = 0.6;
    graph.balloonText = "[[value]] litres of beer per year";
    chart.addGraph(graph);

    // WRITE
    chart.write("chart");
}

我需要var chartData = [ { "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"}, { "option": "Ireland", "percentage": 131.10,"color":"#ff9900"}, { "option": "Germany", "percentage": 115.80,"color":"#448800"}, { "option": "Australia", "percentage": 109.90,"color":"#2175d9"}, { "option": "Austria", "percentage": 108.30,"color":"#2175d9"}, { "option": "UK", "percentage": 99.00,"color":"#2175d9"} ] json百分比值。

我怎样才能从那个json中解析仅有百分比对，例如156.90,131.10 ....并传递给chartData ??

我得到的图表如下：

Answer 1

图表没有出现的原因有几个。

1）您没有为jQuery的AJAX调用指定内容类型。这样您就可以获得未转换为数组的纯文本响应。这是$.post()函数中的第四个参数。：

$.post("fetchpollresult.php", {qstnid: qstnId}, function (data) {
           drawStuff(data);
       }, "json");

2）简单的拼写错误。图表代码中有categoryField的“选项”，数据中有“选项”（单数）。

只需相应更改categoryField：

chart.categoryField = "option";

3）您在unitianalized变量中分配图表对象。这可能会使一些旧浏览器感到困惑。只需在分配前添加var以初始化图表变量：

var chart = new AmCharts.AmSerialChart();

这是完整的代码：

$( "#viewResult" ).click( function() {

  $( "#chart" ).show();

  var qstnId = $( "div[name='pollqstn']" ).attr( "id" );
  //Ajax to load all poll results
  $.post( "fetchpollresult.php", {
    qstnid: qstnId
  }, function( data ) {
    drawStuff( data );
  }, "json" );

} );

function drawStuff( chartData ) {
  var chart = new AmCharts.AmSerialChart();
  chart.dataProvider = chartData;
  chart.categoryField = "option";
  chart.startDuration = 3;
  chart.sequencedAnimation = false;

  // VALUE AXIS
  var valueAxis = new AmCharts.ValueAxis();
  valueAxis.axisAlpha = 0.15;
  valueAxis.minimum = 0;
  valueAxis.dashLength = 3;
  chart.addValueAxis( valueAxis );

  // GRAPH
  var graph = new AmCharts.AmGraph();
  graph.type = "column";
  graph.colorField = "color"
  graph.valueField = "percentage";
  graph.fillAlphas = 0.6;
  graph.balloonText = "[[value]] litres of beer per year";
  chart.addGraph( graph );

  // WRITE
  chart.write( "chart" );
}

amcharts需要parseFloat来自ajax响应的值

1 个答案: