PHP / HTML-如何绘制数组图?

时间:2019-03-07 23:30:27

标签: javascript php html graph charts

我发现了数组的均值,众数,中位数和标准差。现在,我想在图中显示它们。我想绘制一个数组的折线图,并指出均值,众数,中位数和标准差。我尝试了一些仅在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 个答案:

答案 0 :(得分: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