Question

我在vaadin应用程序中使用highcharts。它以单线图的最佳方式工作。如果我放49行，每行包含2048个值。我已经禁用了标记，阴影，工具提示，动画。但是这个图表在谷歌浏览器中显示需要30秒才能在Firefox中显示超过30秒。如何快速显示。代码如下：

String s = "";
s+="chart = Highcharts.setOptions(Highcharts.theme);"+
                "  chart = new Highcharts.Chart({\n" + 
                "            chart: {\n" + 
                "                renderTo: 'container5',\n" + 
                "                type: 'line',\n" +                 
                "            },\n" + 
                "            title: {\n" + 
                "                text: 'Intensity Graph'\n" + 
                "            },\n" +
                "            xAxis: {\n" + 
                "            min:0,\n"+
                "            max:2100,\n"+
                "            tickInterval:100,\n"+
                "                labels: {\n" + 
                "                    rotation: -45,\n" + 
                "                    align: 'right',\n" + 
                "                    style: {\n" + 
                "                        fontSize: '13px',\n" + 
                "                        fontFamily: 'Verdana, sans-serif'\n" + 
                "                    }\n" + 
                "                }\n" + 
                "            },\n" + 
                "        yAxis: {\n" + 
                "           title:{\n" + 
                "            text:''\n" +               
                "           },"+                
                "             min:0,\n"+
                "             max:255,\n"+  
                "            tickInterval:20,\n"+
                "        },\n" + 
                "plotOptions: {\n" + 
                "            series: {\n" + 
                "                marker: {\n" + 
                "                    enabled: false,\n" +                   
                "                    shadow : false,\n"+
                "                    animation : false\n"+              
                "            },"+
                "color: '#00FF00',\n"+
                "            lineWidth: 0.1"+   
                "           },"+            
                "        },"+
                " tooltip: {\n" + 
                "            enabled: false\n" + 
                "        },"+
                "            legend: {\n" + 
                "                enabled: false\n" + 
                "            },\n" + 
//              "            tooltip: {\n" + 
//              "                formatter: function() {\n" + 
//              "                    return '<b>'+ this.x +'</b><br/>'+\n" + 
//              "                        'lux: '+ Highcharts.numberFormat(this.y, 1) +\n" + 
//              "                        ' px';\n" + 
//              "                }\n" + 
//              "            },\n" + 
                "                series: [{\n" + 
                "                name: 'Ejection Count',\n" + 
                "                data: [" +
                "],\n" + 
                "                dataLabels: {\n" + 
                "                    enabled: true,\n" + 
                "                    rotation: -90,\n" + 
                "                    color: '#FFFFFF',\n" + 
                "                    align: 'right',\n" + 
                "                    x: -3,\n" + 
                "                    y: 10,\n" + 
                "                    formatter: function() {\n" + 
                "                        return this.y;\n" + 
                "                    },\n" + 
                "                    style: {\n" + 
                "                        fontSize: '13px',\n" + 
                "                        fontFamily: 'Verdana, sans-serif'\n" + 
                "                    }\n" + 
                "                }\n" + 
                "            }]\n" + 
                "        });" +             
                "  });");

long len = 2,kk1 = 0;
            Highchart hc = new Highchart();
            byte[] cor = new byte[4584];// I am adding this array content to the graph
                    StringBuffer sb = new StringBuffer();
            try
            {
                for (long l = 0; l < len; l++) 
                {
                    sb.append(" this.chart.addSeries({\n" + 
                    "            data: [" );    
                    for (int i = 0; i < 2; i++) 
                {                   
                        if(i == 0)
                        {
                        //2048 points
                            for (int j = 0,k = 276; k < 2324; j++,k++) 
                        {
                                    if(j == 2323)
                            {   
                              sb.append(cor[k]) ;
                            }                           
                            else 
                            {
                              sb.append((cor[k] +",");
                            }
                        }
                        }                      
                }
                    sb.append("],"+
                    "     redraw :false,\n"+
                    "     animation:false\n"+
                    "});") ;                                        
                }   
                } 
                catch (FileNotFoundException e) 
                {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                catch (IOException e)
                {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                sb.append("this.chart.redraw();");  
                        hc.drawChart(sb.toString());

                        }

Answer 1

Highcharts显示100k点的速度并不快。为此我建议使用Highstock，参见54k点的例子：http://www.highcharts.com/stock/demo/data-grouping其中图表在0.2秒内构建。 Highstock的主要加速是dataGrouping。

带有更多点的折线图中的高线图多行需要30秒才能显示

1 个答案: