代码之家  ›  专栏  ›  技术社区  ›  rn605435

性能问题,是什么引起的?

  •  0
  • rn605435  · 技术社区  · 6 年前

    我在网页上加载了ChartJS的图表上有性能问题

    这是一个堆积条形图,我正在对数据库中获取的数据进行大量计算。

    我想知道的是 在哪里需要更改代码以提高执行时间?

    由于stackoverflow,我把它用于计算执行时间:

    $time_start = microtime(true); 
    echo 'Total execution time in seconds: ' . (microtime(true) - $time_start);
    

    在我的php文件中的两个主要循环周围。

    结果如下:

    Total execution time in seconds: 0.01149320602417
    Total execution time2 in seconds: 0.0041401386260986
    

    很明显这不是因为循环的缘故,对吧?

    我还跟踪了Chrome的性能:

    enter image description here

    以及:

    enter image description here

    这是否意味着缓慢的加载时间是由chartjs引起的,或者它证明什么都没有?

    我最初是因为这个帖子: Chart.js too slow rendering vertical stacked bars chart 它是一个循环给图表赋值的方法,但现在我不确定了。

    我将vars传递到图表的方法(计算的第二个循环):

    for ($cd=0; $cd <= $curday; $cd++) {
        for ($i=0; $i <$maxy; $i++) {
            if (!isset($dataset[$i][$cd])) break; 
            //$dummydata = array(NULL, $dataset[$i][$cd]);
            $dummydata = array();
            // add empty values for previous days
            for ($zz=0; $zz < $cd; $zz++){
                $dummydata[]=null;
            }
            // add current value
            $dummydata[]=$dataset[$i][$cd];
            $dummy=array('type' => "bar",
                       'label' => "Intensity " . $intensity[$i][$cd],
                       'backgroundColor' => $intColors[$intensity[$i][$cd]],
                       'data' => ($dummydata));
            array_push($arrDatasets, $dummy);
        }         
    }
    

    编辑: JSON数据:

    $arrReturn = (array('labels' => $labels, 
                                   'datasets' => $arrDatasets));
                $mydata = json_encode(($arrReturn));
    

    编辑: javascript部分:

    $html .= "<script>";
        $html .= "var ctx=document.getElementById('myChart').getContext('2d');";
        $html .= "var myChart = new Chart(ctx, {";
        $html .= "type:'". $type . "',";
        $html .= "data:" . $mydata . ",";
        $html .= "options: " . $options;
        $html .= "});";
        $html .= "</script>";
    

    这是$mydata的输出: enter image description here

    1 回复  |  直到 6 年前
        1
  •  0
  •   rn605435    6 年前

    是因为查特的缘故。我换了一个库,用了一个更合适的图表,它现在几乎立刻加载