2

我在根据我存储在数据库中的标记绘制直方图时遇到问题。我找到了一些示例，它不适用于我的数据库。

这是我的数据库的样子：

mark |task |student |subject|
--------------------------------
20     A1   Chris1   CHEM123
10     A1   David    CHEM123

...和更多

我想从特定任务中查看标记。输出类似这样：

 0
 2
 4
 6 *****
 8 ************
10 *****
12 ****************
14 *********
16 ****
18 ***
20
22
24
26
28

但我没有这样做。我未能显示与此类似的输出。

这是我找到的示例代码（index.php）：

$data = array (
            'Column 1' => 8,
            'Column 2' => 5,
            'Column 3' => 8,
            'Column 4' => 5,
            'Column 5' => 8,
            'Column 6' => 6,
            'Column 7' => 7,
            'Column 8' => 8,
            'Column 9' => 9,
            'Column 10' => 8,
            'Column 11' => 12,
            'Column 12' => 4,
            'Column 13' => 2
            );
$max = max($data);
echo '<table>';
foreach ($data as $k=>$v)
{
    echo "<tr><td>$k</td><td><img src='bar.php?max=$max&val=$v'> $v</td></tr>";
}
echo '</table>';

这是bar.php：

<?php
// set dimensions
$w     = 202;
$h     = 20;
// create image
$im    = imagecreate($w, $h);
// set colours to be used
$bg    = imagecolorallocate($im, 0xE0, 0xE0, 0xE0);
$black = imagecolorallocate($im, 0x00, 0x00, 0x00);
$red   = imagecolorallocate($im, 0xFF, 0x00, 0x00);
$green = imagecolorallocate($im, 0x50, 0xB6, 0x30);
// draw border
imagerectangle($im, 0, 0, $w - 1, $h - 1, $bg); // border uses background colur also
imagecolortransparent($im, $bg); // now make bg colour transparent
// get value and max value from query string
$val  = isset($_GET['val']) ? $_GET['val'] : 0;
$max  = isset($_GET['max']) ? $_GET['max'] : 100;
// calculate dimensions of inner bar
$barw = $max ? floor(($w - 2) * $val / $max) : 0;
$barh = $h - 2;
// draw inner bar
if ($barw) {
    $barcolor = $red;
    imagefilledrectangle($im, 1, 1, $barw, $barh, $barcolor);
}
// send image header
header("content-type: image/png");
// send png image
imagepng($im);
imagedestroy($im);
?>
4

1 回答 1

0

我遇到了同样的问题，并使用诸如highcharts 之类的 javascript 库解决了。它为您提供了漂亮、精美且易于使用的图表，您只需要按照您已经做过的方式定义数据，但是在 js 中。

已编辑

Highcharts 是一个 javascript 代码库，可以为您绘制图表，只需将库添加到您的页面。该文档非常清楚地遵循。要将其添加到您的页面，只需将这些行放在该<head>部分中：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

然后添加这行代码，它定义了在哪里绘制图表<div id="container" style="width:100%; height:400px;"></div>。您可以更改宽度和高度以满足您的需要。

现在只需将您的数据传递给图表，将以下代码（它是从文档中提取的用于绘制简单图表的摘录）添加到您的页面：

<script>
$(function () { 
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});​
</script>

我认为代码是不言自明的，您可以定义图表类型（条形图）、标题、X 和 Y 轴以及数据系列。您应该将数据放在一个数组中，数组中的每个数字都将成为图表中的一个条形。

于 2013-06-18T10:16:40.273 回答