显示所选区域的值（JavaScript图表）

时间：2014-10-30 17:40:03

标签： javascript charts

我正在寻找一个JavaScript库，它允许在图表中选择一个区域并显示从MySQL检索到的值（而不是缩放）。

示例：在图表中显示学生ID

1 个答案:

答案 0 :(得分：2)

我是ZingChart的团队成员，我很乐意帮助你。我使用ZingChart作为这个答案，我强烈建议您检查一下。品牌版本完全免费使用，包括与付费版本相同的所有功能和图表类型。

入门，我首先在本地计算机上创建了一个MySQL表，并用以下数据填充它：

Student roster

然后我在我的页面中创建了JavaScript变量，以保持获得某个等级的学生数量的运行记录。这些在图表JSON中用于绘制沿x刻度的每个点。

var APluses=0,
    As=0,
    BPluses=0,
    Bs=0,
    CPluses=0,
    Cs=0,
    DPluses=0,
    Ds=0,
    Fs=0;

我打开了与我的名册数据库的连接，并将所有学生数据输入到阵列数组中。

<?php
//Open a connection to my database 
$mysqli = new mysqli("localhost", "root", "root", "roster");
 if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

var students=[<?php 
$data=mysqli_query($mysqli,"SELECT * FROM records");
while($info=mysqli_fetch_array($data))
    echo '["'.$info['ID'].'","'.$info['Grade'].'"],'; //var students=[["ID0","Grade0"],["ID1","Grade1"],...,["IDn","Graden"]]
    echo '[]'; //Add empty element after final concatenation
?>];
students.pop(); //Pop off final, empty element so that we don't have a trailing comma

接下来，我设置了一个switch语句，它使用每个学生的成绩作为开关的表达式，每个案例将学生的ID连接到studentIds字符串数组中的相应元素，我稍后会在标签中使用，并递增我们的字母等级计数器。

var studentIds=["Students with A+'s:<br>","Students with A's:<br>","Students with B+'s:<br>","Students with B's:<br>","Students with C+'s:<br>","Students with C's:<br>","Students with D+'s:<br>","Students with D's:<br>","Students with F's:<br>"];
for(var n=0;n<students.length;n++){
    switch(students[n][3]){
        case "A+":
        studentIds[0]=studentIds[0].concat(students[n][0]+"<br>");
        APluses++;
        break;
        case "A":
        studentIds[1]=studentIds[1].concat(students[n][0]+"<br>");
        As++;
        break;
        case "B+":
        studentIds[2]=studentIds[2].concat(students[n][0]+"<br>");
        BPluses++;
        break;
        case "B":
        studentIds[3]=studentIds[3].concat(students[n][0]+"<br>");
        Bs++;
        break;
        case "C+":
        studentIds[4]=studentIds[4].concat(students[n][0]+"<br>");
        CPluses++;
        break;
        case "C":
        studentIds[5]=studentIds[5].concat(students[n][0]+"<br>");
        Cs++;
        break; 
        case "D+":
        studentIds[6]=studentIds[6].concat(students[n][0]+"<br>");
        DPluses++;
        break;
        case "D":
        studentIds[7]=studentIds[7].concat(students[n][0]+"<br>");
        Ds++;
        break;
        case "F":
        studentIds[8]=studentIds[8].concat(students[n][0]+"<br>");
        Fs++;
        break;
    }
}

最后，我创建了图表。创建图表涉及3个主要步骤。包括脚本，创建具有唯一ID的图表div元素，并调用zingchart.render方法。

在我的页面中，我添加了download package中的ZingChart脚本：

<script src="lib/zingchart-html5-min.js"></script>

我在页面中放置了一个带有唯一ID的div（这将是呈现图表的位置）：

<div id="myChart"></div>

我打电话给zingchart.render方法：

window.onload=function(){
    zingchart.render({
        id:"myChart",
        width:"50%",
        height:400,
        data:{
            "type":"area",
            "title":{
                "text":"Overall Class Grades"
            },
            "plot":{
                "tooltip":{
                    "visible":0
                }
            },
            "scale-x":{
                "values":["A+","A","B+","B","C+","C","D+","D","F"],
                "offset-start":10,
                "offset-end":10
            },
            "scale-y":{
                "values":"0:5:1"
            },
            "series":[
            {
                "values":[["A+",APluses],["A",As],["B+",BPluses],["B",Bs],["C+",CPluses],["C",Cs],["D+",DPluses],["D",Ds],["F",Fs]]
            }
            ]
        }
    });

由于您希望在单击每个节点时显示ID，因此我使用ZingChart API创建node_click事件侦听器，该侦听器添加附加到单击节点的标签对象，并使用studentIds中的相应元素来显示ID列表。

zingchart.node_click = function(p) {
      console.log(p);
      zingchart.exec('myChart', 'removeobject', {
        type: 'label',
        class: 'labelClass'
    });
      if (p.nodeindex == 0) {
        zingchart.exec('myChart', 'addobject', {
          'type': 'label',
          'data': {
            'id': 'label1',
            'class': 'labelClass',
            'text': studentIds[p.nodeindex],
            'hook': "node:index=" + p.nodeindex,
            'offset-y': -50,
            "offset-x": 30,
            "background-color": "white",
            "border-radius": 5,
            "shadow": 0,
            "z-index": 10,
            "border-width": 1,
            "border-color": "black"
        }
    });
    } else {
        zingchart.exec('myChart', 'addobject', {
          'type': 'label',
          'data': {
            'id': 'label1',
            'class': 'labelClass',
            'text': studentIds[p.nodeindex],
            'hook': "node:index=" + p.nodeindex,
            'offset-y': -50,
            "background-color": "white",
            "border-radius": 5,
            "shadow": 0,
            "z-index": 10,
            "border-width": 1,
            "border-color": "black"
        }
    });
    }
}

我将包含一个PHP片段，供您玩。

＆＃13;
＆＃13; 
var APluses=0,
    As=0,
    BPluses=0,
    Bs=0,
    CPluses=0,
    Cs=0,
    DPluses=0,
    Ds=0,
    Fs=0;
    var students=[["162835","D+"],["725383","B+"],["678942","A"],["678923","A+"],["927345","A+"],["534902","B"],["634283","C"],["927365","B+"],["917254","A"],["152848","C+"],["624184","D"],[]];
    
    students.pop();
    var studentIds=["Students with A+'s:<br>","Students with A's:<br>","Students with B+'s:<br>","Students with B's:<br>","Students with C+'s:<br>","Students with C's:<br>","Students with D+'s:<br>","Students with D's:<br>","Students with F's:<br>"];
    for(var n=0;n<students.length;n++){
        switch(students[n][1]){
            case "A+":
            studentIds[0]=studentIds[0].concat(students[n][0]+"<br>");
            APluses++;
            break;
            case "A":
            studentIds[1]=studentIds[1].concat(students[n][0]+"<br>");
            As++;
            break;
            case "B+":
            studentIds[2]=studentIds[2].concat(students[n][0]+"<br>");
            BPluses++;
            break;
            case "B":
            studentIds[3]=studentIds[3].concat(students[n][0]+"<br>");
            Bs++;
            break;
            case "C+":
            studentIds[4]=studentIds[4].concat(students[n][0]+"<br>");
            CPluses++;
            break;
            case "C":
            studentIds[5]=studentIds[5].concat(students[n][0]+"<br>");
            Cs++;
            break; 
            case "D+":
            studentIds[6]=studentIds[6].concat(students[n][0]+"<br>");
            DPluses++;
            break;
            case "D":
            studentIds[7]=studentIds[7].concat(students[n][0]+"<br>");
            Ds++;
            break;
            case "F":
            studentIds[8]=studentIds[8].concat(students[n][0]+"<br>");
            Fs++;
            break;
        }
    }

zingchart.node_click = function(p) {
    console.log(p);
      zingchart.exec('myChart', 'removeobject', {
        type: 'label',
        class: 'labelClass'
    });
      if (p.nodeindex == 0) {
        zingchart.exec('myChart', 'addobject', {
          'type': 'label',
          'data': {
            'id': 'label1',
            'class': 'labelClass',
            'text': studentIds[p.nodeindex],
            'hook': "node:index=" + p.nodeindex,
            'offset-y': -50,
            "offset-x": 50,
            "background-color": "white",
            "border-radius": 5,
            "shadow": 0,
            "z-index": 10,
            "border-width": 1,
            "border-color": "black"
        }
    });
    } else {
        zingchart.exec('myChart', 'addobject', {
          'type': 'label',
          'data': {
            'id': 'label1',
            'class': 'labelClass',
            'text': studentIds[p.nodeindex],
            'hook': "node:index=" + p.nodeindex,
            'offset-y': -50,
            "background-color": "white",
            "border-radius": 5,
            "shadow": 0,
            "z-index": 10,
            "border-width": 1,
            "border-color": "black"
        }
    });
    }
}

window.onload=function(){
    zingchart.render({
        id:"myChart",
        width:"100%",
        height:400,
        data:{
            "type":"area",
            "title":{
                "text":"Overall Class Grades"
            },
            "plot":{
                "tooltip":{
                    "visible":0,
                    "text":"%data-id"
                },
                "selection-mode":"plot",
                "selected-state":{
                    "background-color":"red"
                }
            },
            "scale-x":{
                "values":["A+","A","B+","B","C+","C","D+","D","F"],
                "offset-start":10,
                "offset-end":10

            },
            "scale-y":{
                "values":"0:5:1"
            },
            "series":[
            {
                "values":[["A+",APluses],["A",As],["B+",BPluses],["B",Bs],["C+",CPluses],["C",Cs],["D+",DPluses],["D",Ds],["F",Fs]]
            }
            ]
        }
    });
  }
＆＃13; 
<script src="http://zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
＆＃13;
＆＃13;
＆＃13;

如果您有任何疑问，请与我联系！

相关问题
最新问题