Highcharts线未绘制答案

【问题标题】：Highcharts line not plottingHighcharts线未绘制
【发布时间】：2015-09-02 17:41:03
【问题描述】：

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

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

db_code`

<?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 中完成。

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

希望它很简单，通常是:)

【问题讨论】：

traffic 是否包含项目？尝试在您的 options.series[0] 定义中设置 data: [] 您设置 name: 'Occurance' 的位置。
您的数据是否正确排序？我的意思是，traffic 是按照line[0] 的升序构建的？
数据是通过 MySQL 排序的，有 1557 个唯一点要绘制，但是我的有效日期时间图有 18000 个，所以这不是很努力。我是新手，非常感谢您的意见。我假设您的意思是 series: [{ name: 'Occurrence', data: [ ] ]} 如果是这样，它没有任何区别。

标签： mysql highcharts

【解决方案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;

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

【讨论】：

【解决方案2】：

好吧，我说这很简单，确实如此。

我添加了 ,10 以确保它是十进制并且没有任何区别。我将其更改为 16，并期望值会发生变化，它确实在读取数据，尽管它仍然没有绘制数据。

然后我将 .replace(',', '') 添加到 y 轴并且它起作用了。

parseFloat (line[1],10),
parseFloat(line[1].replace(',', ''), 10)

似乎它不喜欢数据值中的逗号！

【讨论】：