amcharts 需要 parseFloat 来自 ajax 响应的值

Question

我正在尝试创建 amcharts 条形图。我有以下 json 来自 json:

[
        { "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"}
    ]

我打电话给ajax如下：

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


   });

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

$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"}
        ]

我需要 parseFloat json 百分比值。

我怎样才能从 json 中仅解析浮动百分比对，例如 156.90,131.10.... 并作为图表数据传递？

我得到的图表如下：

Answer 1

图表未显示的原因有几个。

1) 您没有为 jQuery 的 AJAX 调用指定内容类型。通过这种方式，您可以获得未转换为数组的纯文本响应。它是$.post()函数中的第四个参数。:

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

2) 简单的错字。您在图表代码中有 "options" 表示 categoryField，而在数据中有 "option"（单数）。

只需相应地更改 categoryField：

chart.categoryField = "option";

3) 您在单位化变量中分配图表对象。这可能会使一些较旧的浏览器感到困惑。只需在赋值前添加 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 响应的值

amcharts need to parseFloat the values from ajax response

json

parsefloat

amcharts