Группировка данных в диаграммах JS и PHP - PullRequest
0 голосов
/ 28 мая 2020

Привет, у меня есть таблица данных, которую я пытаюсь нарисовать с помощью диаграммы JS. Массив данных выглядит следующим образом:

Array
(
    [0] => Array
        (
            [Sort] => 2
            [Weeks] => 1-2 Weeks
            [Severity] => P1
            [Count] => 7
        )

    [1] => Array
        (
            [Sort] => 2
            [Weeks] => 1-2 Weeks
            [Severity] => P2
            [Count] => 3
        )

    [2] => Array
        (
            [Sort] => 2
            [Weeks] => 1-2 Weeks
            [Severity] => P3
            [Count] => 4
        )

    [3] => Array
        (
            [Sort] => 2
            [Weeks] => 1-2 Weeks
            [Severity] => P4
            [Count] => 3
        )

    [4] => Array
        (
            [Sort] => 3
            [Weeks] => 2-3 weeks
            [Severity] => P1
            [Count] => 1
        )

    [5] => Array
        (
            [Sort] => 4
            [Weeks] => >4 weeks
            [Severity] => No Value
            [Count] => 1
        )

    [6] => Array
        (
            [Sort] => 4
            [Weeks] => >4 weeks
            [Severity] => P1
            [Count] => 1
        )

    [7] => Array
        (
            [Sort] => 4
            [Weeks] => >4 weeks
            [Severity] => P3
            [Count] => 1
        )

) 

Я преобразовал этот массив, совместимый с диаграммой JS, как показано ниже

Array
(
    [labels] => Array
        (
            [0] => >4 weeks
            [1] => 2-3 weeks
            [2] => 1-2 Weeks
        )

    [datasets] => Array
        (
            [0] => Array
                (
                    [label] => No Value
                    [backgroundColor] => #F00
                    [borderColor] => #F00
                    [borderWidth] => 1
                    [maxBarThickness] => 50
                    [data] => Array
                        (
                            [0] => 1
                        )

                )

            [1] => Array
                (
                    [label] => P1
                    [backgroundColor] => #84a4d4
                    [borderColor] => #84a4d4
                    [borderWidth] => 1
                    [maxBarThickness] => 50
                    [data] => Array
                        (
                            [0] => 1
                            [1] => 1
                            [2] => 7
                        )

                )

            [2] => Array
                (
                    [label] => P3
                    [backgroundColor] => #eb8d22
                    [borderColor] => #eb8d22
                    [borderWidth] => 1
                    [maxBarThickness] => 50
                    [data] => Array
                        (
                            [0] => 1
                            [1] => 4
                        )

                )

            [3] => Array
                (
                    [label] => P2
                    [backgroundColor] => #FBCEB1
                    [borderColor] => #FBCEB1
                    [borderWidth] => 1
                    [maxBarThickness] => 50
                    [data] => Array
                        (
                            [0] => 3
                        )

                )

            [4] => Array
                (
                    [label] => P4
                    [backgroundColor] => #7FFFD4
                    [borderColor] => #7FFFD4
                    [borderWidth] => 1
                    [maxBarThickness] => 50
                    [data] => Array
                        (
                            [0] => 3
                        )

                )

        )

)

Но данные зашифровываются, когда они отображаются в диаграмме. Данные располагаются следующим образом: enter image description here

Это реальные данные, и как должен выглядеть график enter image description here

Вот мой код

<code>function chart(){
        $ar= RNCPHP\AnalyticsReport::fetch('Open tickets Ageing by priority');
        $arr= $ar->run(0, $filters);


        $chartInit  =   array();
        $chartArr['data']   =   array();

        // push the report data into an array
        for ( $ii = $arr->count(); $ii--; ) {
            $row = $arr->next();

            if($row['Severity'] == null || $row['Severity'] == "") {
                $row['Severity']    =   "No Value";
            }

            $row['Sort']    =   $row['Sort'];

            array_push($chartInit, $row);
        }
        echo "<pre>";
        print_r($chartInit);

        array_multisort(array_map(function($element) {
            return $element['Sort'];
        }, $chartInit), SORT_DESC, $chartInit);


        $chartDataArr   =   array();
        $sevArr =   array();

        foreach($chartInit as $k => $v) {
            if(!isset($chartDataArr[$v['Weeks']])) {
                $chartDataArr[$v['Weeks']]  =   array();
            }

            array_push($chartDataArr[$v['Weeks']], $v);

            if(!in_array($v['Severity'], $sevArr)) {
                array_push($sevArr, $v['Severity']);
            }
        }

        $mapLabels  =   array();

        $parsedAry  =   array();
        $parsedAry['labels']    =   array();
        $parsedAry['datasets']  =   array();

        for($i = 0; $i < count($sevArr); $i++) {
            $parsedAry['datasets'][$i]  =   array();

            $parsedAry['datasets'][$i]['label'] =   $sevArr[$i];
            $parsedAry['datasets'][$i]['backgroundColor']   =   $this->getColor($i);
            $parsedAry['datasets'][$i]['borderColor']   =   $this->getColor($i);
            $parsedAry['datasets'][$i]['borderWidth']   =   1;
            $parsedAry['datasets'][$i]['maxBarThickness']   =   50;

            $parsedAry['datasets'][$i]['data']  =   array();
        }

        foreach($chartDataArr as $k => $v) {
            array_push($parsedAry['labels'], $k);

            foreach($v as $k1 => $v1) {
                $keySev =   "";
                foreach($parsedAry['datasets'] as $k2 => $v2) {
                    if($v2['label'] == $v1['Severity']) {
                        $keySev =   $k2;
                    }
                }

                if($v1['Count'] == null || $v1['Count'] == "") {
                    $v1['Count']    =   0;
                }

                array_push($parsedAry['datasets'][$keySev]['data'], $v1['Count']);
            }
        }

        echo "<pre>";
        print_r($parsedAry);
        echo "
"; $ chartArr ['data'] = $ parsedAry; return $ chartArr;}

На моей странице просмотра я показываю данные с помощью Chart JS Function

<canvas id="chart6"></canvas>
<script>
var ctx = document.getElementById('chart6').getContext('2d');

var data = <?php echo $data ?>;
var drawChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    stepSize: 1
                }
            }]
        },
        title: {
            display: true,
            text: 'Open tickets Ageing by priority'
        }
    }
});
</script>

Пожалуйста, помогите.

1 Ответ

1 голос
/ 28 мая 2020

У вашего кода несколько проблем.

Во-первых, ваши наборы данных должны содержать данные в количестве меток, чтобы вы не могли игнорировать пустые места, не заполнив их. Чтобы решить эту проблему, вам нужно изменить $parsedAry['datasets'][$i]['data'] = array(); на $parsedAry['datasets'][$i]['data'] = array(0, 0, 0, 0, 0);

Это добавит 5 пустых мест в ваши наборы данных.

Во-вторых, вы должны поместить числа в правильные места для этого, который вы необходимо добавить счетчик для вашего последнего l oop, чтобы определить нужные места.

Наконец, ваш код должен выглядеть так.

<code>function chart()
{
    $ar = RNCPHP\AnalyticsReport::fetch('Open tickets Ageing by priority');
    $arr = $ar->run(0, $filters);


    $chartInit = array();
    $chartArr['data'] = array();

    // push the report data into an array
    for ($ii = $arr->count(); $ii--;) {
        $row = $arr->next();

        if ($row['Severity'] == null || $row['Severity'] == "") {
            $row['Severity'] = "No Value";
        }

        $row['Sort'] = $row['Sort'];

        array_push($chartInit, $row);
    }
    echo "<pre>";
    print_r($chartInit);

    array_multisort(array_map(function ($element) {
        return $element['Sort'];
    }, $chartInit), SORT_DESC, $chartInit);


    $chartDataArr = array();
    $sevArr = array();

    foreach ($chartInit as $k => $v) {
        if (!isset($chartDataArr[$v['Weeks']])) {
            $chartDataArr[$v['Weeks']] = array();
        }

        array_push($chartDataArr[$v['Weeks']], $v);

        if (!in_array($v['Severity'], $sevArr)) {
            array_push($sevArr, $v['Severity']);
        }
    }

    $mapLabels = array();

    $parsedAry = array();
    $parsedAry['labels'] = array();
    $parsedAry['datasets'] = array();

    for ($i = 0; $i < count($sevArr); $i++) {
        $parsedAry['datasets'][$i] = array();

        $parsedAry['datasets'][$i]['label'] = $sevArr[$i];
        $parsedAry['datasets'][$i]['backgroundColor'] = $this->getColor($i);
        $parsedAry['datasets'][$i]['borderColor'] = $this->getColor($i);
        $parsedAry['datasets'][$i]['borderWidth'] = 1;
        $parsedAry['datasets'][$i]['maxBarThickness'] = 50;

        $parsedAry['datasets'][$i]['data'] = array(0, 0, 0, 0, 0);
    }

    $labelsNo = 0;
    foreach ($chartDataArr as $k => $v) {
        array_push($parsedAry['labels'], $k);

        foreach ($v as $k1 => $v1) {
            $keySev = "";
            foreach ($parsedAry['datasets'] as $k2 => $v2) {
                if ($v2['label'] == $v1['Severity']) {
                    $keySev = $k2;
                }
            }

            if ($v1['Count'] == null || $v1['Count'] == "") {
                $v1['Count'] = 0;
            }

            $parsedAry['datasets'][$keySev]['data'][$labelsNo] = $v1['Count'];
        }
        $labelsNo++;
    }

    echo "<pre>";
    print_r($parsedAry);
    echo "
"; $ chartArr ['data'] = $ parsedAry; return $ chartArr;}
...