首页 文章

在Highcharts中添加数据点

提问于
浏览 次
1

我的任务是在页面上显示几个图表（asp.net），所有图表都是动态生成的，因为图表计数是随机的 . 我有非常长的“加载”时间（页面没有响应等），并发现它是在客户端，添加了系列点 .

我意识到这是由于我对高级图表缺乏了解，以及我可能会用这种方法做的“额外”工作 .

我首先创建一个新的'div'容器，将它们附加到页面，将其作为highcharts对象启动，然后添加点 .

jQuery.each(hotCakes, function (a, value) {

            var thecpuchartsmall = {
                chart: { type: 'area' },
                title: { text: value.vmName + " processor usage %" }
            };

            //Create New Div
            var theDiv = document.createElement('div');
            var newId = "div_" + value.vmName;

            theDiv.className = 'vmCPU_Div';
            theDiv.id = newId;
            $("#divAllVM").append(theDiv);

            //Create the Chart, assign to Div       
            $("#" + newId).highcharts(thecpuchartsmall);

            var tmpChart = $("#" + theDiv.id).highcharts();
            tmpChart.addSeries({ name: value.vmName, data: [] });

            jQuery.each(value.dateValue, function (v, dateValues) {
                tmpChart.series[0].addPoint([Date.parse(dateValues[0]), parseFloat(dateValues[1])]);
            });
        });

这就是问题：

tmpChart.series[0].addPoint(..)

它不喜欢这样做30或多达300个数据点 . 然后我决定只创建一个数组，推送其中的所有值，并将其分配给该系列 . 加载时间（在我的测试中）从40秒变为10秒（ajax数据为6秒）

这是解决方案：

var myData = [];
            jQuery.each(value.dateValue, function (v, dateValues) {
                myData.push([Date.parse(dateValues[0]), parseFloat(dateValues[1])]);
            });

            me.series[0].setData(myData);

具有较长加载时间的第一个场景中，highcharts到底做了什么？

highcharts

1 回答

  • 1

    如果你看一下API documentation，Highcharts正在添加点然后重绘图（ redraw 选项默认为true）！

    请注意，为了获得最佳性能，您应该使用已有的数据创建图表：

    var myData = [];
        jQuery.each(value.dateValue, function (v, dateValues) {
            myData.push([Date.parse(dateValues[0]), parseFloat(dateValues[1])]);
        });

        var thecpuchartsmall = {
            chart: { type: 'area' },
            title: { text: value.vmName + " processor usage %" },
            series: [{data: myData, name: value.vmName}]
        };

        $("#" + newId).highcharts(thecpuchartsmall);
    回复于

相关问题