Php / Html - Как я могу нарисовать график массива?

#javascript #php #html #graph #charts

#javascript #php #HTML #График #Диаграммы

Вопрос:

Я нашел среднее значение, режим, медиану и стандартное отклонение массива. Теперь я хочу показать их на графике. Я хочу нарисовать линейную диаграмму массива и указать среднее значение, режим, медиану и стандартное отклонение. Я попробовал что-то ниже, только на осях x и y появились не цифры, я вроде как новичок в php. Мне нужна помощь, чтобы преобразовать мой массив в линейную диаграмму. Есть ли кто — нибудь , кто может мне с этим помочь ? Спасибо.

Мой код:

 <?php   
echo "Welcome to my project".'<br>'.'<br>'; 
$arr=array(1100,3150,4430,4430,5170,7450,7450,7450,8230);
for($i=0; $i<=8; $i  )
{
    if ($arr[$i]<100) {
    $arr[$i]=$arr[$i];
 }
    else
    {
        $arr[$i]=$arr[$i]/1000;
        $arr[$i]=(string)$arr[$i];
    }
}

function calculate($arr, $output){

        switch($output){
            case 'mean':
                $count = count($arr) 1;
                $sum = array_sum($arr);
                $total = $sum / $count;
            break;
            case 'median':
                rsort($arr);
                $middle = (count($arr) / 2) 1;
                $total = $arr[$middle-1];
            break;
            case 'mode':
                $v = array_count_values($arr); 
                arsort($v); 
                foreach($v as $k => $v){$total = $k; break;}

            break;

        }
        return $total;
    }

function sd_square($x, $total) { return pow($x - $total,2); }
function sd($arr) {
    return sqrt(array_sum(array_map("sd_square", $arr, array_fill(0,count($arr), (array_sum($arr) / count($arr)) ) ) ) / (count($arr)-1) );
}

echo '  '.'<br>';
echo "Values: ";
echo json_encode($arr).'<br>';
echo 'Mean: '.calculate($arr, 'mean').'<br>';
echo 'Median: '.calculate($arr, 'median').'<br>';
echo 'Mode: '.calculate($arr, 'mode').'<br>';
echo "Standart Derivation: ".sd($arr);
?>


<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Analysis"
    },
    axisY: {
        title: "Variables"
    },
    data: [{
        type: "line",
        arr: <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>
    }]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 250px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

1. Добро пожаловать в SO. Прежде всего, поместите все <script> теги внутри <head> HTML-кода, и любые с атрибутами src идут перед вашим пользовательским кодом.

2. разве они не внутри тега <head> ? Я не мог понять вас, извините @Steven Stark

3. нет, у вас есть <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> как часть вашего <body> . Поместите это непосредственно после <head> , но перед вашим пользовательским тегом script

4. очень жаль, я надеялся, что проблема в том, что js еще не загружен.

5. Я могу видеть график, но не вижу на нем своих цифр. только оси x и y

Ответ №1:

сначала преобразуйте данные вашего массива в координаты x / y…

 var data = <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>;
data = data.map(function (row, index) {
    return {
        x: index,
        y: row
    };
});

затем добавьте к dataPoints ключу в data

     data: [{
        type: "line",
        dataPoints: data  // <-- add x / y coordinates here
    }]

например

 window.onload = function () {

var data = <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>;
data = data.map(function (row, index) {
    return {
        x: index,
        y: row
    };
});

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Analysis"
    },
    axisY: {
        title: "Variables"
    },
    data: [{
        type: "line",
        dataPoints: data
    }]
});
chart.render();

}

посмотрите на эту скрипту php…

http://phpfiddle.org/main/code/d5t2-gunj