javascript - 通过 AJAX 设置 fusioncharts 数据集

Question

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

我的问题是融合图表需要看到例如“value”:“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 成功 block 中，您可以看到我正在尝试通过 AJAX 数据设置数据集，但 fusioncharts 需要将其视为“value”:“1”而我的数据格式为“0”:“1”，“23”:“4”。

将其转换为 fusioncharts 想要的格式的最佳解决方案是什么？

Answer 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>

希望这有帮助。