HighCharts Linechart MySQL/PHP 数据多行答案

【问题标题】：HighCharts Linechart MySQL/PHP data for multiple linesHighCharts Linechart MySQL/PHP 数据多行
【发布时间】：2014-05-20 22:50:45
【问题描述】：

我有一个 Highchart 折线图，我希望显示 4 条线，其中 2 条通过我拥有的 MySQL 数据库表是动态的，我已将其配置为与 GoogleCharts API 完美配合，但最近我看到了HighCharts，印象非常深刻。我已经将它配置为工作，但我只让它与一条线一起工作。我试图在数组中添加新线，但我似乎看不到线的绘制位置，因为我是 HighCharts 的新手。我已将其配置为使用“DPMO”列，当我将行从1 更改为2 时，它会显示我希望与 dpmo 行一起显示的平均行。结合两条静态线，一条为 3,000，另一条为 5,000。

谢谢。

IRDR.php 文件

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>OAK3 - 12 Week IRDR DPMO</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/setup.js"></script>
    <script type="text/javascript" src="js/test.js"></script>    
</head>

<body>
    <script src="js/highcharts.js"></script>
    <div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

Setup.js

var chart;
    $(document).ready(function() {
        var cursan = {
            chart: {
                renderTo: 'sales',
                defaultSeriesType: 'line',
                marginRight: 10,
                marginBottom: 20
            },
            title: {
                text: 'IRDR 12 Week DPMO',
            },
            subtitle: {
                text: 'http://blackmesa.amazon.com',
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'DPMO'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 30,
                borderWidth: 0
            },

            plotOptions: {

                series: {
                    cursor: 'pointer',  
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                color: Highcharts.getOptions().colors[2],
                name: 'IRDR DPMO',
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 3,
                    lineColor: null // inherit from series
                },
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: '#666666',
                    align: 'top',
                    x: -10,
                    y: -10,
                    style: {
                        fontSize: '9px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 0px black'
                    }
                }
            }],

        }


        //Fetch MySql Records
        jQuery.get('js/data.php', null, function(tsv) {
            var lines = [];
            traffic = [];
            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/);
                    dpmo = line[0];
                    average = line[1];
                    amo=parseFloat(line[1].replace(',', ''));
                    if (isNaN(amo)) {
                        amo = null;
                    }
                    traffic.push([
                        dpmo,
                        amo,
                        average
                    ]);
                });
            } catch (e) {  }
            cursan.series[0].data = traffic;
            chart = new Highcharts.Chart(cursan);
        });
 });

Data.php（我的数据是从 MySQL 数据库表中提取的）

<?php

$con=mysql_connect('localhost','root','password');
mysql_select_db("test", $con);
$result=mysql_query('select substr(process_name,11,15) as process_name, a.dpmo as dpmo, a.process_id as process_id, oak3_ia.dpmo as average from (select * from oak3_irdr_chart order by process_id desc limit 12)a left join oak3_irdr_average oak3_ia on oak3_ia.process_id = a .process_id order by process_id');
while($row = mysql_fetch_array($result)) {
  echo $row['process_name'] . "\t" . $row['dpmo']. "\t" . $row['average']. "\n";
}

?>

电流输出：

预期输出：

【问题讨论】：

标签： javascript php mysql highcharts

【解决方案1】：

因为您应该在系列对象中设置多个系列数组，但您只有一个系列：cursan.series[0].data = traffic; 这意味着您有一个系列对象，即一个系列。

【讨论】：

谢谢您的回复。你会建议我做什么来纠正这个问题？ cursan.series[0].data = 流量；是否应该将其更改为 []？还是我必须在其他地方定义数组？很抱歉我的菜鸟回复，我对这个图表 api 没有太多经验。