Question

我正在开发一个项目，我们通过hibernate将数据传递给表。在此基础上有一个仪表板，我们可以通过这些图表查看数据中有多少例外或者数量有多少例外事件在数据中。我们也应该能够更改图表视图。例如持续1小时。最后一天。上周等我的桌子看起来像这样。

event
-----------------
id,      created,     updated,    event_type,     source_machine
1       07.05.2011                  event1                machine1
2       07.05.2011                  event2                machine2 
3       07.05.2011             NullPointerException       machine2 
4       06.05.2011                  event2                machine2
5       06.05.2011                  event1                machine1
6       05.05.2011                  event2                machine1
7       04.05.2011                  event1                machine2
*Currently, table has 10k rows.

我不确定哪种框架/库最适合用于此目的。我已经考虑过highcharts和Jasperreports，但我对他们两个都是全新的。

仅供参考：我们正在为项目使用Spring Framework。

任何帮助都会得到赞赏。

Answer 1

这不是基于java的解决方案，但我建议您查看D3.js。

非常好。

Answer 2

在这里有类似问题的人的帮助我发布我的解决方案... 我已经完成了以下操作....为此使用了highcharts ... 通过json和division我想在这里创建图表作为函数参数...这个使用highstocks.js

function drawChart(json, div, type, resultType) {
if($.isEmptyObject(json)){
    $('#' + div).html("No Data Available for this Timeframe! try again with different Timeframe!.");
}
else{
    var processed_json = new Array();
    $.map(json, function(obj, i) {
        processed_json.push({
            name : obj.key,
            y : parseInt(obj.value),
            customName : obj.name
        });
    });
    len = processed_json.length;
    len = len < 25 ? len : 25;
    $('#' + div).highcharts(
            {
                chart : {
                    type : type,
                    credits:{enabled: false}
                },
                plotOptions : {
                    pie : {size: 700,
                        point : {
                            events : {
                                legendItemClick : function() {
                                     this.select();
                                       chart.tooltip.refresh(this); 
                                    return true; // <== returning false will cancel the default action i.e remove legends from chart
                                }
                            }
                        },
                        allowPointSelect : true,
                        cursor : 'pointer',
                        dataLabels : {
                            "overflow": "justify",
                            enabled : true,
                            style: {
                                width: '100px'
                            }
                        },
                        showInLegend : true
                    }
                },
                title : {
                    text : 'Metric Performance Analysis',
                    floating : true,
                    align : 'right',
                    x : -30,
                    y : 30
                },
                xAxis : {
                    type : "category",
                    title: {
                        enabled: true,
                        text: '<b> Date </b>',
                        style: {
                            fontWeight: 'normal'
                        }
                    },
                    labels: {
                        rotation: -90,
                        style: {
                            fontSize: '12px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    },
                    max : len
                },
                yAxis: {
                    title: {
                        enabled: true,
                        text: '<b>'+resultType+'</b>',
                        style: {
                            fontWeight: 'normal'
                        }
                    }
                },
                scrollbar: {
                    enabled: true,
                    barBackgroundColor: 'gray',
                    barBorderRadius: 7,
                    barBorderWidth: 0,
                    buttonBackgroundColor: 'gray',
                    buttonBorderWidth: 0,
                    buttonArrowColor: 'yellow',
                    buttonBorderRadius: 7,
                    rifleColor: 'yellow',
                    trackBackgroundColor: 'white',
                    trackBorderWidth: 1,
                    trackBorderColor: 'silver',
                    trackBorderRadius: 7
                },
                tooltip : {
                    formatter : function() {
                        return '<b> '+resultType+': </b>' + this.point.y
                                + '<br/><b>Date: </b>' + this.point.name
                                + ' <br><b> Metric: </b>'
                                + this.point.customName;
                    }
                },
                series : [ {
                    name : "Data",
                    turboThreshold : 0,
                    data : processed_json
                } ]
            });
}

}

Answer 3

有许多javascript图形库可用，它们需要以JSON格式输入。我使用过CanvasJS，RGraph，jqPlot，Morris.js，Chartist等。应该直接返回json格式的x和y轴标签和值列表。

示例RGraph ajax for line graph，

  var tips = ['19','59','20','30','10','12','23'];

     // Now draw the chart
     var line = new RGraph.Line({
         id: 'lineChart',
         data: json.data,
         options: {
             textAccessible: true,
             hmargin: 10,
             linewidth: 2,
             shadow: true,
             ymax: 100,
             labels: json.label,
             tooltips: tips,
             gutterLeft: 35,
             title:"Job Cards created this week by dealers"
         }
     }).draw();

json.data是y轴数据，json.label是x轴值。请参阅Basic ajax示例和json格式http://www.rgraph.net/demos/basic-ajax-json.html

转到http://www.rgraph.net/getdata.html?json查看json格式，

{data:[83,68,14,88,75,18,64,22,63,79], labels: ['Gary','Olga','Lewis','Rachel','Nathan','Matt','Kevin','Indigo','Lou','Pete']}

以上内容必须以Spring控制器的形式返回JSON格式。

其他库对基于ajax的图形也有或多或少相同的概念。

从java webapp中的数据生成图表

3 个答案: