使用mysql数据创建条形图答案

【问题标题】：Create bar chart using mysql data使用mysql数据创建条形图
【发布时间】：2016-08-22 16:48:38
【问题描述】：

我想使用以 JSON 格式返回的 mysql 数据创建栏。

[
  {
    "Score": "84",
    "Trainer": "Jamshaid",
    "Subject Name": "Java"
  },
  {
    "Score": "50",
    "Trainer": "Zaid",
    "Subject Name": "Android"
  },
  {
    "Score": "40",
    "Trainer": "Sajjad",
    "Subject Name": "iOS"
  },
  {
    "Score": "50",
    "Trainer": "Jamshaid",
    "Subject Name": "iOS"
  }
]

我想创建类似this 的图表

但问题是它是从表格中格式化的。但如上所示，我有 JSON 格式的数据。

这是我正在关注的链接。我们可以将 JSON 数据转换为格式，以便它可以根据所示数据填充图表

https://blueflame-software.com/bar-chart-with-data-from-mysql-using-highcharts/

【问题讨论】：

@AliMamdov 我已经检查过上面的格式是很好的 JSON 格式。
我更正了格式，最后一个 JSON 对象中缺少 {。你想针对什么策划什么？就像 X 轴和 Y 轴中的一样
@MohammadSanaulla 在 Y 轴上，我们将在 X 轴分数上显示主题名称，如上图所示
看看这个 jsFiddle：jsfiddle.net/68smjpeL 尝试过让我知道它是否符合要求。我们没有所有科目的分数
@MohammadSanulla 这很好。但是 JSON 是来自服务器的动态的，所以我们将如何填充 Graph 中的数据，我们将有 3 个名称，这很好，但是我们将如何从 JSON 中获取这三个的数据

标签： javascript php mysql json highcharts

【解决方案1】：

您可以在Javascript中处理JSON来构建图表所需的数据，如下所示：

var jsonFromServer = [
  {
    "Score": "84",
    "Trainer": "Jamshaid",
    "Subject Name": "Java"
  },
  {
    "Score": "50",
    "Trainer": "Zaid",
    "Subject Name": "Android"
  },
  {
    "Score": "40",
    "Trainer": "Sajjad",
    "Subject Name": "iOS"
  },
  {
    "Score": "50",
    "Trainer": "Jamshaid",
    "Subject Name": "iOS"
  }
];

以上是从服务器捕获的变量中的数据

以下代码可帮助您从 JSON 响应中提取 Y 轴值（即唯一的主题名称）：

function getSubjects(){
    var subjectsMap = {};
  $.each(jsonFromServer, function(index, value){
    if(!subjectsMap[value['Subject Name']]){
        subjectsMap[value['Subject Name']] = 1;
    }
  });
  return $.map(subjectsMap, function(index, val){ return val; });
}

然后我们需要提取不同主题中每个教练的分数，其格式应为： [{name: "Trainer", data: []}] 其中 data 是主题中分数的数组，其顺序应相同作为出现在 Y 轴数据中的对象的顺序。可以使用以下代码实现：

function getTrainers(){
    var trainersMap = {};
  $.each(jsonFromServer, function(index, value){
    if(!trainersMap[value['Trainer']]){
        trainersMap[value['Trainer']] = 1;
    }
  });
  return $.map(trainersMap, function(index, val){ return val; });
}
function getMarks(){
  var subjects = getSubjects();
  var trainers= getTrainers();
  var marks = {};
  //initialize the trainers scores in all subjects to 0
   $.each(trainers, function(index, trainer){
    if ( !marks[trainer]){
        marks[trainer] = {};
    }
    $.each(subjects, function(idx2, sub){
        marks[trainer][sub] = 0;
    });
  });

  //now populate with the actual values obtained from server
  $.each(subjects, function(idx2, sub){
    $.each(jsonFromServer, function(index, value){
        var trainer = value['Trainer'];
        var subName = value['Subject Name'];
      var score = value['Score'];
      if ( sub == subName){
            marks[trainer][sub] = score;  
      }
    });

  });

  //now format the marks object into the format required for highcharts
  //i.e an array of object with properties [{name: "", data:[]}]
  return $.map(marks, function(val, index){ 
    var scoreArray = [];
    $.each(val, function(index, score){
        scoreArray.push(parseInt(score));
    });
    return {"name": index, "data": scoreArray}; 
  });

}

工作代码可以在小提琴here中找到。

【讨论】：