2

私は Highcharts の初心者で、PHP と MySQL でそれを使用する方法を学ぼうとしています。配列内のいくつかのサンプル データから単純な縦棒グラフを表示したいと考えています。ただし、これを実装するにはいくつかの問題があります。列がグラフに表示されず、凡例に空白の余分なラベルが表示されます。誰かがこのコードをクリーンアップし、機能させ、サンプルコードにコメントを付けて理解を深めるのを手伝ってくれたら、それは大きな助けになるでしょう. 他の何人かの人々も同様の例を探していると確信しています。私はこのサイトと HighCharts フォーラムと例を調べましたが、PHP と MySQL を使用して動的な列タイプのグラフを作成する方法を学ぶのに役立つ、探していたものを正確に見つけることができませんでした. よろしくお願いします。

これが私が持っているコードです。いくつかの問題があることはわかっています。初心者や学生が理解しやすいように、これを短い例として保持しようとしました。あなたの助けは大歓迎です：

サンプル データには、その人物の姓と売上高が含まれています。これは TSV 形式で、配列は次のようになります。 Doe 3567 Right 5476 Johnson 4351 Brown 2945

data.php

    <?php
    $con = mysql_connect("localhost","root","");
    if (!$con) {
      die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("test", $con);
    $result = mysql_query("SELECT * FROM user");
    while($row = mysql_fetch_array($result)) {
      echo $row['lastname'] . "\t" . $row['sales']. "\n";
    }
    mysql_close($con);
    ?>

index.php

<!DOCTYPE html><html><head>
</head><body>
<div id="container" style="height: 400px; width: 900px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
jQuery(function($) {
    var options = {
        chart: {renderTo: 'container', defaultSeriesType:'column', height: 400},
        title: {text: 'Sales Performance'},
        xAxis: {title: {text: 'Sales Peoples'}, type: 'linear'},
        yAxis: {title: {text: 'Dollars'}, plotLines: [{ value: 0, width: 1, color: '#808080'}]},
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+'('+this.x +' : '+ this.y +')';
            }
        },
        legend: {layout: 'vertical', align: 'left', verticalAlign: 'top', x: 40, y: 100,   borderWidth: 0, width: 300 },
        series: []
    };

    jQuery.get('data.php', null, function(tsv) {
        var data = {};
        tsv = tsv.split(/\n/g); // split into rows
        for (var row=0, rows=tsv.length; row<rows; row++) {
            var line = tsv[row].split(/\t/g), // split into columns
                series_name = line[0],
                x = Number(line[1]),
                y = Number(line[2]);
            if (!data[series_name]) data[series_name] = [];
            data[series_name].push([x,y]);
            //alert("The data is: "+series_name)
        }
        for (var series_name in data) {
            options.series.push({
                name: series_name,
                data: data[series_name]
            });
        }
        new Highcharts.Chart(options);
    });

});
</script>
</body></html>
4

1 に答える 1

1

data[シリーズ名].push([x,y]);

data[series_name].push(x);

あなたはしていないyし、line[2]

于 2012-12-01T12:22:25.440 に答える