如何在chart.js中绘制多行

时间:2017-07-22 08:05:20

标签: java json charts chart.js

我使用java以jSON格式向chart.js提供数据,   这是java代码。

    JSONObject json_in = new JSONObject();
     json_in.put("subject_name", rs.getString("subjectName"));
     json_in.put("max_marks", rs.getString("MaxMarks"));
     json_in.put("obtained_marks", rs.getString("marks"));
     json_arr.add(json_in);

这是chart.js

$("#admin_analytic_exam").on("submit", function(event){  
       event.preventDefault();  
         $.ajax({  
                 url:"admin_analytic_exam",  
                 method:"POST",  
                 data:$('#admin_analytic_exam').serialize(),  
                 beforeSend:function(){  
                      $('#showload').show();  
                 },  
                 success:function(graph_data){
                        // alert(data); 
                      $('#showload').hide();
                     $('#chart_block').show();

                      var subject_name = [];
                      var obtained_marks = [];
                      var max_marks = [];

                      var keys = Object.keys(graph_data);
                        for (var i = 0; i < keys.length; i++)
                        {
                            var key = keys[i];
                            subject_name.push(graph_data[i].subject_name);
                            //console.log(key +" " +subject_name); 
                            obtained_marks.push(graph_data[i].obtained_marks);
                             max_marks.push(graph_data[i].max_marks);
                        }
                      console.log(subject_name);  
                      exit();
                     for(var i in graph_data){
                          subject_name.push(graph_data[i].subject_name);
                          obtained_marks.push(graph_data[i].obtained_marks);
                          label.push(graph_data[i].label);
                    }

                    var ctx = document.getElementById("myChart");
        var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata,
                            options: {
                                        scales: {
                                            xAxes: [{
                                                    scaleLabel: {
                                                      display: true,
                                                      labelString: 'Subject'
                                                    }
                                                  }],
                                            yAxes: [{
                                                ticks: {
                                                    beginAtZero: true,
                                                    //stepSize: 0.5,
                                                    //suggestedMin: 0,
                                                    suggestedMax: max_marks[0]
                                                }
                                            }]
                                        }
                                    }
        });  
                 }  
            });
  });

我想动态绘制多行。如何以json格式从数据库中获取数据到chat.js.这些行不止一个。

这是我正在使用的JSON格式

[ { "pointBackgroundColor":"rgba(184,184,184,1)", "backgroundColor":"rgba(184, 184, 184, 0.2)", "borderColor":"'rgba(184, 184, 184, 1)", "data":"50", "subject_Name":"CDX", "label":"Test", "type":"line" }, { "pointBackgroundColor":"rgba(184,184,184,1)", "backgroundColor":"rgba(184, 184, 184, 0.2)", "borderColor":"'rgba(184, 184, 184, 1)", "data":"42", "subject_Name":"ISM", "label":"Test", "type":"line" }, { "pointBackgroundColor":"rgba(184,184,184,1)", "backgroundColor":"rgba(184, 184, 184, 0.2)", "borderColor":"'rgba(184, 184, 184, 1)", "data":"23", "subject_Name":"DSA", "label":"Test", "type":"line" }

1 个答案:

答案 0 :(得分:0)

只需使用JSON预定义函数准备给定的JSON格式,或者您可以通过将JSON转换为String来修改String string = json_obj.toString();{} [] 您可以添加,删除和替换\",也可以根据您的要求添加双引号JSON。完成编辑后,请检查JSON Parser

上的{{1}}格式