Question

任何人都请帮助我，

我有sp.php

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/dark-green.js"></script>

<script type="text/javascript">
    var chart;
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'spline',
                        marginRight: 130,
                        marginBottom: 40
                    },
                    title: {
                        text: 'Grafik jumlah SUM SUK',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'per Hari',
                        x: -20
                    },
                    xAxis: {
                       title: {
                  text: 'tanggal '
                  //color:'#808080'
             },
                        type: 'datetime',
                        tickInterval: 172800 * 1000, // two days
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%e', this.value);
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Rupiah'
                        },
                        tickInterval: 5000000,
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                tooltip: {
                        formatter: function() {
                                return  Highcharts.dateFormat('%e %b', this.x) +': <b>'+ 'Rp' + this.y + '</b>';

                        }
                    },

                      plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            /*      tooltip: {
            valueDecimals: 2,
            valuePrefix: 'Rp',
            valueSuffix: ' ID'
        }, */

                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 300,
                        borderWidth: 2
                    },
                    series: [{
                        name: 'Saldo'
                    }]
                }
                // Load data asynchronously using jQuery. On success, add the data
                // to the options and initiate the chart.
                // This data is obtained by exporting a GA custom report to TSV.
                // http://api.jquery.com/jQuery.get/
                jQuery.get('datasp.php', null, function(tsv) {
                    var line = [];
                    traffic = [];
                    traffic1 = [];

                    try {
                        // split the data return into lines and parse them
                        tsv = tsv.split(/\n/g);
                        jQuery.each(tsv, function(i, line) {
                            line = line.split(/\t/);
                            date = Date.parse(line[0] +' UTC');
                                traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10),
                                parseInt(line[2].replace(',', ''), 10),
                            ]);
                        });
                    } catch (e) {  }
                     options.series[0].data = traffic;
                    // chart.addSeries(series);
                    // options.series[0].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
            });
</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

</body>

然后使用datasp.php从ms sql获取数据

$result = mssql_query("select tanggal, sum(kredit) umasuk,sum(debet) ukluar   from tbl_transaksi
where year(tanggal)=2012 and month(tanggal)=09 and kd_subperkiraan='150'
group by tanggal ");

//while($row = mssql_fetch_array($result)) {
//  echo $row['tgl_masuk'] . "\t" . $row['jumlah']. "\n";
//}

while($row = mssql_fetch_array($result)) {
$uts=strtotime($row[tanggal]);   //convertir a Unix Timestamp
$date=date("l, F j,Y  H:i:s",$uts);
//echo $valor3 . "\t" . $row[$valor2]. "\n";
//echo $date . "\t" . $row[umasuk]. "\n";
echo $date . "\t" . $row[ukluar] . "\t" . $row[umasuk]. "\n";

} 

mssql_close($con);

在datasp.php上查询的结果示例如下：

Monday, September 3,2012 00:00:00   28425000    7149000
Wednesday, September 5,2012 00:00:00    22100000    5519000

现在我想在高线图上显示 28425000 和 7149000 的2系列值，但在我的图表中只显示28425000值（所有行[1]），但行[2]不显示。所以我的图表上只显示一行，有人可以帮帮我吗？

Answer 1

似乎你需要制作两个数组。

1）第1行的第一个数组并传递给0系列

2）第2行的第二个数组并传递给第1列

尝试更改您的代码，如下所示

            traffic = [];
            traffic1 = [];

            try {
                // split the data return into lines and parse them
                tsv = tsv.split(/\n/g);
                jQuery.each(tsv, function(i, line) {
                    line = line.split(/\t/);
                    date = Date.parse(line[0] +' UTC');
                        traffic.push([
                        date,
                        parseInt(line[1].replace(',', ''), 10),
                    ]);

                    traffic1.push([
                        date,
                        parseInt(line[2].replace(',', ''), 10),
                    ]);
                });
            } catch (e) {  }

            options.series[0].data = traffic;
            options.series[1].data = traffic1;

您还需要将系列名称更改为选项

series: [{
                        name: 'Saldo'
                    },{
                        name: 'Saldo1'
                    }]

参考此链接：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/

jquery显示来自数据库的2系列高图

1 个答案: