【问题标题】:Setting fusioncharts dataset via AJAX通过 AJAX 设置 fusioncharts 数据集
【发布时间】:2018-05-02 01:19:02
【问题描述】:

我正在尝试使用 fusioncharts 创建图表,我正在使用 AJAX 查询来获取数据,下面是我生成图表的方式。

我的问题是融合图表需要查看例如“值”:“1”,因为我需要能够使用“0”:“1”,因为下面是我的 php

我的 PHP 脚本获取昨天和今天每个小时的登录信息

$yesterdays_date =  new datetime(date('d.m.Y',strtotime("-1 days")));

$query = "SELECT DATE(login_date) as date, HOUR(login_date) as hour, COUNT(*) as logins FROM logins  WHERE login_date >= '".$yesterdays_date->format('Y-m-d')."' GROUP BY DATE(login_date), HOUR(login_date)";

//storing the result of the executed query
$result = $conn->query($query);

//initialize the array to store the processed data
$jsonArray = array();


$array = array(
  'today' => array(
    "seriesname" => "Logins Yesterday",
    "data" => array(
    '0' => 0,
    '1' => 0,
    '2' => 0,
    '3' => 0,
    '4' => 0,
    '5' => 0,
    '6' => 0,
    '7' => 0,
    '8' => 0,
    '9' => 0,
    '10' => 0,
    '11' => 0,
    '12' => 0,
    '13' => 0,
    '14' => 0,
    '15' => 0,
    '16' => 0,
    '17' => 0,
    '18' => 0,
    '19' => 0,
    '20' => 0,
    '21' => 0,
    '22' => 0,
    '23' => 0,
    ),
    ),
  'yesterday' => array(
    "seriesname" => "Logins Today",
    "renderAs" => "line",
    "showValues" => "0",
    "data" => array(    
    '0' => 0,
    '1' => 0,
    '2' => 0,
    '3' => 0,
    '4' => 0,
    '5' => 0,
    '6' => 0,
    '7' => 0,
    '8' => 0,
    '9' => 0,
    '10' => 0,
    '11' => 0,
    '12' => 0,
    '13' => 0,
    '14' => 0,
    '15' => 0,
    '16' => 0,
    '17' => 0,
    '18' => 0,
    '19' => 0,
    '20' => 0,
    '21' => 0,
    '22' => 0,
    '23' => 0,
    ),
    ),
  );

//check if there is any data returned by the SQL Query
if ($result->num_rows > 0) {
  //Converting the results into an associative array
  while($row = $result->fetch_assoc()) {

    if($row['date'] == $yesterdays_date->format('Y-m-d')){
      //- Yesterdays data
      $array['yesterday']['data'][$row['hour']] = $row['logins'];

    }else{
      //- Todays data
      $array['today']['data'][$row['hour']] = $row['logins'];

    }


    //$jsonArrayItem = array();
    //$jsonArrayItem['date'] = $row['date'];
    //$jsonArrayItem['hour'] = $row['hour'];
    //$jsonArrayItem['logins'] = $row['logins'];

    //append the above created object into the main array.
    //array_push($jsonArray, $jsonArrayItem);
  }
}




//set the response content type as JSON
header('Content-type: application/json');
//output the return value of json encode using the echo function. 
echo json_encode($array);.

我从 PHP 脚本返回的数据

我的 jQuery 来生成昨天和今天的登录比较图表

 function getLogins(){    
    $.ajax({
       url: '/ajax/getLoginsToday.php',
       type: 'GET',
      success: function(data){

      var chartProperties = {
      "caption": "Product-wise quarterly revenue Vs profit in last year",
      "subCaption": "Harry's SuperMart",
      "xAxisname": "Quarter",
      "yAxisName": "Login Total",
      "paletteColors": "#0075c2,#1aaf5d,#f2c500",
      "bgColor": "#ffffff",
      "borderAlpha": "20",
      "showCanvasBorder": "0",
      "usePlotGradientColor": "0",
      "plotBorderAlpha": "10",
      "legendBorderAlpha": "0",
      "legendShadow": "0",
      "legendBgAlpha": "0",
      "valueFontColor": "#ffffff",
      "showXAxisLine": "1",
      "xAxisLineColor": "#999999",
      "divlineColor": "#999999",
      "divLineDashed": "1",
      "showAlternateHGridColor": "0",
      "subcaptionFontBold": "0",
      "subcaptionFontSize": "14",
      "showHoverEffect": "1"
      };
        apiChart = new FusionCharts({
        type: 'stackedcolumn2dline',
        renderAt: 'chartContainer',
        width: '550',
        height: '350',
        dataFormat: 'json',
        dataSource: {
          "chart": chartProperties,
          "categories": [
              {
                  "category": [
                      {
                          "label": "00-01"
                      },
                      {
                          "label": "01-02"
                      },
                      {
                          "label": "02-03"
                      },
                      {
                          "label": "03-04"
                      },
                      {
                          "label": "04-05"
                      },
                      {
                          "label": "05-06"
                      },
                      {
                          "label": "06-07"
                      },
                      {
                          "label": "07-08"
                      },  
                      {
                          "label": "08-09"
                      },
                      {
                          "label": "09-10"
                      },
                      {
                          "label": "10-11"
                      },
                      {
                          "label": "11-12"
                      },
                      {
                          "label": "12-13"
                      },
                      {
                          "label": "13-14"
                      },
                      {
                          "label": "14-15"
                      },
                      {
                          "label": "15-16"
                      },  
                      {
                          "label": "16-17"
                      },
                      {
                          "label": "17-18"
                      },
                      {
                          "label": "18-19"
                      },
                      {
                          "label": "19-20"
                      },
                      {
                          "label": "20-21"
                      },
                      {
                          "label": "21-22"
                      },
                      {
                          "label": "22-23"
                      },
                      {
                          "label": "23-24"
                      }                        
                  ]
              }
          ],
          "dataset": [
              {
                  "seriesname": "Logins Yesterday",
                  "data": data
              },
              {
                  "seriesname": "Logins Today",
                  "renderAs": "line",
                  "showValues": "0",
                  "data": [
                      {
                          "value": "24000"
                      },
                      {
                          "value": "45000"
                      },
                      {
                          "value": "23000"
                      },
                      {
                          "value": "38000"
                      }
                  ]
              }
          ]
        }
      });
      apiChart.render();
      }
    });
  }

在我上面的 jQuery AJAX 成功块中,您可以看到我正在尝试通过 AJAX 数据设置数据集,但 fusioncharts 需要将其视为“值”:“1” 而我的数据格式为“0”:“1”,“23”:“4”。

将其转换为 fusioncharts 所需格式的最佳解决方案是什么?

【问题讨论】:

    标签: javascript php jquery ajax fusioncharts


    【解决方案1】:

    你可以试试Array.map()

    上面的代码可以让你转换这个:

    [15,15,16,17,18,19,20,21,22,25,30,32,28,15,14,15,15,10,8,7,8,9,10,10]

    到这里:

    [{"value":15},{"value":15},{"value":16},{"value":17},{"value":18},{"value":19},{"value":20},{"value":21},{"value":22},{"value":25},{"value":30},{"value":32},{"value":28},{"value":15},{"value":14},{"value":15},{"value":15},{"value":10},{"value":8},{"value":7},{"value":8},{"value":9},{"value":10},{"value":10}]
    

    说明:

    var yesterdayData = [15,15,16,17,18,19,20,21,22,25,30,32,28,15,14,15,15,10,8,7,8,9,10,10];
    var yesterday = []; // Declare a new variable to expose the results in the graph. 
    
    yesterdayData.map(function(x) { // x contains the current value.
       yesterday.push({"value": x}); // For every item in the array, push the current value to the yesterday array variable.
    });
    

    类似这样的:

    $(function() {
      function getLogins() {
        $.ajax({
          url: "https://gist.githubusercontent.com/dannyjhonston/4ef6fae2e6142606578c080aec4cd690/raw/04ab3a73f4a07defbd67de6b9e8ffaf47ea61862/fusioncharts.json",
          type: "GET",
          success: function(data) {
            data = JSON.parse(data);
            var yesterdayData = data.yesterday.data; // Data from the server.
            var yesterday = [], todayData = data.today.data; // Data from the server.
            var today = [];
    
            yesterdayData.map(function(x) {
              yesterday.push({
                "value": x
              });
            });
    
            todayData.map(function(x) {
              today.push({
                "value": x
              });
            });
    
            var chartProperties = {
              "caption": "Product-wise quarterly revenue Vs profit in last year",
              "subCaption": "Harry's SuperMart",
              "xAxisname": "Quarter",
              "yAxisName": "Login Total",
              "paletteColors": "#0075c2,#1aaf5d,#f2c500",
              "bgColor": "#ffffff",
              "borderAlpha": "20",
              "showCanvasBorder": "0",
              "usePlotGradientColor": "0",
              "plotBorderAlpha": "10",
              "legendBorderAlpha": "0",
              "legendShadow": "0",
              "legendBgAlpha": "0",
              "valueFontColor": "#ffffff",
              "showXAxisLine": "1",
              "xAxisLineColor": "#999999",
              "divlineColor": "#999999",
              "divLineDashed": "1",
              "showAlternateHGridColor": "0",
              "subcaptionFontBold": "0",
              "subcaptionFontSize": "14",
              "showHoverEffect": "1"
            };
            var apiChart = new FusionCharts({
              type: 'stackedcolumn3dline',
              renderAt: 'chartContainer',
              width: '550',
              height: '350',
              dataFormat: 'json',
              dataSource: {
                "chart": chartProperties,
                "categories": [{
                  "category": [{
                    "label": "00-01"
                  }, {
                    "label": "01-02"
                  }, {
                    "label": "02-03"
                  }, {
                    "label": "03-04"
                  }, {
                    "label": "04-05"
                  }, {
                    "label": "05-06"
                  }, {
                    "label": "06-07"
                  }, {
                    "label": "07-08"
                  }, {
                    "label": "08-09"
                  }, {
                    "label": "09-10"
                  }, {
                    "label": "10-11"
                  }, {
                    "label": "11-12"
                  }, {
                    "label": "12-13"
                  }, {
                    "label": "13-14"
                  }, {
                    "label": "14-15"
                  }, {
                    "label": "15-16"
                  }, {
                    "label": "16-17"
                  }, {
                    "label": "17-18"
                  }, {
                    "label": "18-19"
                  }, {
                    "label": "19-20"
                  }, {
                    "label": "20-21"
                  }, {
                    "label": "21-22"
                  }, {
                    "label": "22-23"
                  }, {
                    "label": "23-24"
                  }]
                }],
                "dataset": [{
                  "seriesname": "Logins Yesterday",
                  "data": today // The required data goes here.
                }, {
                  "seriesname": "Logins Today",
                  "renderAs": "line",
                  "showValues": "0",
                  "data": yesterday // The required data goes here.
                }]
              }
            });
            apiChart.render();
          }
        });
      }
      getLogins();
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
    <script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
    <div id="chartContainer">FusionCharts will render here</div>

    希望这会有所帮助。

    【讨论】:

    • 这是完美的,第一次工作很好解释。感谢您的帮助,我认为没有人会理解我的问题,但您解决了我的头痛,尊敬。
    • 不客气。我更新了stackedcolumn3dline 类型。
    猜你喜欢
    • 2014-10-19
    • 2010-12-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多