mysql - Highcharts 线不绘制

Question

我已经使用了一个示例，可以使用 php 和 mysql 成功读取数据并绘制它(时基与变量)，一切正常。我已经采用了它并将其用作模板并使用了不使用时基但图形未呈现的不同数据库。该图旨在显示来自 SQL 查询的数据，该查询将变量的出现频率与 x 轴上的变量和 Y 轴上的出现频率进行比较。

图表会按预期弹出 x 轴和 y 轴值。看起来不错；除了缺少情节。为了帮助我进行故障排除，我在屏幕上列出了数据，尽管不是很漂亮 - 这证明数据库被正确调用并且没有明显的 SQL 错误并且正在返回数据。

数据库代码`

<?php

$con = mysql_connect("localhost","root","hal9000");

if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("sqm", $con);

$result = mysql_query("SELECT magnitude, COUNT(*) AS xxx FROM data WHERE magnitude > 1 GROUP by magnitude");

while($row = mysql_fetch_array($result)) {
   echo $row['magnitude'] . "\t" . $row['xxx']. "\n";
}

mysql_close($con);
?> `

主页代码

<script type="text/javascript">
        var chart;
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'common_LHS',
                        defaultSeriesType: 'line',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Magnitude',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    plotOptions: {
                        series: {
                            marker: {
                                enabled: true,
                                symbol: 'circle',
                                radius: 0
                             }
                        }
                    },
                    xAxis: {
                        type: 'linear',
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Frequency of occurrence'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    tooltip: {
                        crosshairs: [{
                            width: 2,
                            color: 'red'
                        }, {
                            width: 2,
                            color: 'red'
                        }],
                   },

                    series: [{
                        name: 'Occurrence',
                    }]
                }

                jQuery.get('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/);
                            traffic.push ([
                                parseFloat(line[0]),        //need to parseFloat to convert data to float from string
                                parseFloat(line[1])
                            ]);
                        });
                    } catch (e) {  }
                    options.series[0].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
            });

数据在 LibreCalc 中绘制时看起来符合我的预期，除了未呈现的线外，它几乎在 Highcharts 中完成。

感谢任何建议。不幸的是，由于我是这个论坛的新手，我无法提交图片，但如果有帮助，我很乐意将它们发送给其他人。

期望它是简单的东西，通常是:)

Answer 1

我认为问题出在您构建traffic 数组的方式上。可能排序不好。尝试按第一个元素对其进行排序，使用类似:

function Comparator(a,b){
    if (a[0] < b[0]) return -1;
    if (a[0] > b[0]) return 1;
    return 0;
}

traffic.sort(Comparator);

options.series[0].data = traffic;

它会给您带来不同的结果吗？此外，您的浏览器控制台在呈现图表时是否会记录一些内容？