Fatal编程技术网
  • javascript/
  • Javascript 如何提高highcharts图表创建和渲染的性能

Javascript 如何提高highcharts图表创建和渲染的性能

javascript highcharts

Javascript 如何提高highcharts图表创建和渲染的性能,javascript,highcharts,Javascript,Highcharts,我有一个本地文件，其中包含JSON格式化数据。我创建了一个小的PHP脚本，当通过AJAX调用时，它会回显这个文件的输出。数据文件的大小为59k。我按照highcharts的建议禁用动画和阴影。当我加载图表时，渲染需要很长时间。我已将脚本粘贴到下面。你知道我能做些什么来更快地绘制这个图表吗？就目前而言，这绝对是不可接受的 echo_file.php输出如下所示： [{"name":"loess","data":[[1373241600000,3.49571041760408],[137324166

我有一个本地文件，其中包含
JSON
格式化数据。我创建了一个小的
PHP
脚本，当通过
AJAX
调用时，它会回显这个文件的输出。数据文件的大小为
59k
。我按照highcharts的建议禁用动画和阴影。当我加载图表时，渲染需要很长时间。我已将脚本粘贴到下面。你知道我能做些什么来更快地绘制这个图表吗？就目前而言，这绝对是不可接受的

echo_file.php
输出如下所示：

[{"name":"loess","data":[[1373241600000,3.49571041760408],[1373241660000,3.4844505982485],[1373241720000,3.47324293684199],[1373241780000,3.46208745646435],[1373241840000,3.45098418019539],[1373241900000,3.43993313111491],[1373241960000,3.42893433230273],[1373242020000,3.41798780683864],[1373242080000,3.4070935778
43611722495],[1373243400000,3.18069824879358],[1373243460000,3.17101320762565],[1373243520000,3.16138101680096],[1373243580000,3.15180169939934],[1373243640000,3.14227527850057],[1373243700000,3.13280177718446],[1373243760000,3.12338121853083],[1373243820000,3.11401362561948],[1373243880000,3.10469902153021]]}]
以下是脚本：

$(document).ready(function() {


 var seriesOptions = [],
    yAxisOptions = [],
    colors = Highcharts.getOptions().colors;

function myAjax() {
    $.ajax({
                url: 'echo_file.php', 
                datatype: 'json',
                success: function(data) {

                    seriesOptions=data;
                    createChart();
                },

                cache: false    
                });
}

setInterval(myAjax, 300000); 


   function createChart() {

        $('#container').highcharts('StockChart', {
            chart: {
                animation: false,
                shadow: false

            },
            title : {
            text : 'CPU Utilization'
        },

            plotOptions: {

            series: {
                lineWidth: 2
            }
        },

            rangeSelector: {
                enabled: true,
                buttons: [{
                        type: 'minute',
                        count: 60,
                        text: 'hourly'
                    }, {
                        type: 'all',
                        text: 'All'
                    }]
            },
            credits: {
                enabled: false
            },
             xAxis: {
                type: 'datetime',
                minPadding:0.02,
                maxPadding:0.02,
                ordinal: false



            },


            yAxis: {
                labels: {
                    formatter: function() {
                        //return (this.value > 0 ? '+' : '') + this.value + '%';
                        return (this.value);
                    }
                }

            },


            yAxis : {
                title : {
                    text : '% CPU Utilization'
                },
                min:0,
                max:100,

                plotLines : {
                    value : 70,
                    color : '#FFA500',
                    dashStyle : 'shortdash',
                    width : 2,
                    label : {
                        text : 'Threshold',
                        align:'right'
                    }
                }                           

            },
            scrollbar: {
                    enabled: true
                    },
            navigator : {
                adaptToUpdatedData: false

            },


            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y} </b>',
                valueDecimals: 2
            },

            series: seriesOptions

        });
    }

});

$（文档）.ready（函数（）{
var系列选项=[]，
yAxisOptions=[]，
colors=Highcharts.getOptions（）.colors；
函数myAjax（）{
$.ajax({
url:'echo_file.php'，
数据类型：“json”，
成功：功能（数据）{
序列选项=数据；
createChart（）；
},
缓存：false
});
}
setInterval（myAjax，300000）；
函数createChart（）{
$（“#容器”）.highcharts（'StockChart'{
图表：{
动画：错，
影子：错
},
标题：{
文本：“CPU利用率”
},
打印选项：{
系列：{
线宽：2
}
},
范围选择器：{
启用：对，
按钮：[{
键入：“分钟”，
计数：60，
文字：“每小时”
}, {
键入：“全部”，
文字：“全部”
}]
},
学分：{
已启用：false
},
xAxis：{
键入：“日期时间”，
最小填充：0.02，
最大填充：0.02，
序数：假
},
亚克斯：{
标签：{
格式化程序：函数（）{
//返回（this.value>0？'+'：''）+this.value+'%；
返回（该值）；
}
}
},
亚克斯：{
标题：{
文本：'%CPU利用率'
},
分:0,，
最高：100，
绘图线：{
价值：70，
颜色：'#FFA500'，
短跑风格：“短跑”，
宽度：2，
标签：{
文本：“阈值”，
对齐：'右'
}
}                           
},
滚动条：{
已启用：true
},
导航器：{
AdaptToUpdateData:错误
},
工具提示：{
pointFormat:“{series.name}：{point.y}”，
数值小数：2
},
系列：系列选项
});
}
});
即使文件是本地数据，也必须传输到浏览器，因为图表是在那里绘制的，下面是一个52k点的示例，图表加载速度非常快

看

如果在你的情况下，你有太多的点，也许你应该采取一些机制来划分代表性样本，因为它没有意义显示一个图表，眼睛无法区分不同的值​​.

参见

Highcharts刚刚发布了一个boost模块，该模块有助于加速包含大量数据点的图表。你需要一个现代化的浏览器来使用它

这是我想要加速渲染时的highcharts选项。它将删除所有动画、单击事件和工具提示

Highcharts.setOptions({
    plotOptions: {
        area: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        arearange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        areaspline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        areasplinerange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        bar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        boxplot: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        bubble: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        column: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        columnrange: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        errorbar: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        funnel: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        gauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        heatmap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        line: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        pie: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        polygon: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        pyramid: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        scatter: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        series: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        solidgauge: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        spline: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        treemap: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
        waterfall: { animation: false, enableMouseTracking: false, stickyTracking: true, shadow: false, dataLabels: { style: { textShadow: false } } },
    },
    chart: {
        reflow: false,
        events: {
            redraw: function() {
                console.log("highcharts redraw, rendering-done");
                $('body').addClass('rendering-done');
            }
        },
        animation: false
    },
    tooltip: {
        enabled: false,
        animation: false
    },
    exporting: {
        enabled:false
    },
    credits: {
        enabled: false
    }
});
试着用这个想法：@svilamayor，我试过了，但没有任何运气。你想在图表中显示多少点？您确定这是渲染时间，而不是从服务器获取数据的时间？@svillamayor，数据文件是服务器的本地文件，它已经是json格式。我使用php文件来回显内容。没有任何数据库连接。我想很快地显示图表，有点不对劲。看看你的CPU和处理器使用情况。由于javascript都是客户端的，所以性能完全与客户端机器的性能相关联。还可以尝试其他浏览器；您的“日常驱动程序”可能会被阻塞（在我的家用电脑上安装的Firefox在没有缓存清除的情况下会随着时间的推移变得非常缓慢），或者您的扩展可能会造成严重破坏。例如，Firefox版本低于22时，Firebug会减慢页面呈现速度，这是一个已知的问题。我的观点是，检查其他一些涉及的变量，代码似乎很好。当我这样做时，它非常快：$.getJSON（'cdc1.txt'，函数（数据），但是，我真的需要这是ajax调用。如何将$getJSON放入ajax？$.getJSON是一个速记ajax函数，相当于：$.ajax（{dataType:'json'，url:url，data:data，success:success}）；当我使用$getJSON（“”）时，它可以工作，但在这里我想调用一个响应文件输出的php文件。当我使用getJSON（“get_file.php”）时，它不工作。另外，我可以为这个getJSON提供哪些选项以每5分钟运行一次？您需要使用
setInterval（函数（）{/*这里使用getJSON*/}，5*60000）
。您不能使用PHP中的json_编码来回显正确的json并仍然使用getJSON吗？