Question

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

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

我首先创建一个新的'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到底做了什么？

Answer 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);

在Highcharts中添加数据点

1 个答案: