3

我是 JavaScript 和 HighCharts 的新手。我确定这是一个非常简单的问题，但我迷路了。我想创建一个包含三行的散点图。我需要从文本文件中读取数据，文件如下所示：

x   y1  y2  y3

1.02 1.00 6.70 8.19
2.04 1.00 13.30 8.19
3.06 1.00 13.50 8.19
4.08 1.00 9.60 8.19
5.10 1.00 14.60 8.19
6.12 1.00 19.20 8.57

所以我需要用（x和y1），（x和y2），（x和y3）绘制三条线

这是我的 HighCharts 代码：

            <script type="text/javascript">

            $(document).ready(function() {
                var chart1 = new Highcharts.Chart(options);
            });

            var options = {
            chart: {
                    renderTo: 'container',
                type: 'scatter',            
                    zoomType: 'xy'
                },
            title: {
                   text: 'Demo'
                },
            xAxis: {
                title: {
            enabled: true,
            text: 'Time, ns'
            },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
                },
            yAxis: {
                title: {
            text: 'Value'
            }
                },
                series: []
            };

            $.get('///plot.txt', function(data) {
                var lines = data.toString().split('\n');
                $.each(lines, function(lineNo, line) {
                    var item = line.split()});
            options.series[0].data[0].push(parseFloat(item[0]));
            options.series[0].data[1].push(parseFloat(item[1]));

    options.series[1].data[0].push(parseFloat(item[0]));
                options.series[1].data[1].push(parseFloat(item[2]));

                options.series[2].data[0].push(parseFloat(item[0]));
                options.series[2].data[1].push(parseFloat(item[3]));

            }, 'text')

            var chart1 = new Highcharts.Chart(options);

            </script>

我觉得我搞砸了整个代码。对不起，我以前从未写过 JavaScript。任何帮助将不胜感激。先感谢您。

4

2 回答 2

4

这就是你想要得到的：http: //jsfiddle.net/z28vy/

现在发表一些评论

阅读文档

您必须查看非常好的 HighChart 文档，并在 jsfiddle 上提供了实时示例。有些非常接近您的用例（显示通过 AJAX 调用获得的数据中的数据。）

您需要的特殊之处在于获取原始文本数据，这会迫使您进行烦人的解析。

了解你在做什么

即使您的代码最终可以正常工作，看起来您对 javascript 的同步/异步故事有点混乱。如果您是初学者，那么一次可以学习很多东西。更不用说你正在尝试使用匿名函数坚持 jQuery 风格......

缩进！

首先，我不知道这是否只是您在这里的帖子，或者您是否真的编写了这样的代码，但要正确缩进！它会一目了然地告诉你很多问题。尤其是当您编写封闭代码时（例如，您的 ajax 调用的成功回调函数。）

数组

然后，只需一点逻辑：您必须知道，尽管是动态的，javascript 中的数组不能在任何未分配的插槽上进行随机访问（读取或写入）。所以当你在做

options.series[0].data[0].push(parseFloat(item[0]));

您应该之前设置了 options.series[0] ，因为您的 options 对象将 series 定义为空数组：

series: []

您可以在 ajax 成功方法时执行此操作，或者在选项定义时静态执行此操作，具体取决于您在使用的系列数量方面所需的灵活性。我更喜欢你一开始保持简单，然后做：

series: [{
            name: 'Serie 1',
            data: []
        },{
            name: 'Serie 2',
            data: []
        },{
            name: 'Serie 3',
            data: []
        }]

就像你可以像你一样访问你的 3 个系列中的每一个......好吧，除了你对 data[0] 有同样的问题，因为同样的原因，这两个系列都不存在。无论如何不要太在意，因为...

首先使用您的 API

无论如何，向系列中添加点的方式太复杂了。系列有一个 addPoint() 方法，只需使用它！所以而不是

 options.series[0].data[0].push(parseFloat(item[0]));
 options.series[0].data[1].push(parseFloat(item[1]));

做就是了

 options.series[0].addPoint([parseFloat(item[0]), parseFloat(item[1])]);

它已经更容易阅读了:)

jQuery 并不神奇，它只是合乎逻辑

现在您遇到的问题是您对 jquery $.each() 的使用我不知道您是否只是不理解它，或者您是否开始使用它，然后决定硬写您的数据处理以继续前进。

$.each(lines, function(lineNo, line) {
    var item = line.split()});
options.series[0].data[0].push(parseFloat(item[0]));
options.series[0].data[1].push(parseFloat(item[1]));

正如您将清楚地看到，如果您开始缩进和分隔事物，那么您所做的只是毫无目的地分割每一行。

只需使用您的拆分所得。如果我们说我们将当前的序列号放在 serieIdx 中：

$.each(lines, function(lineNo, line) {
    var item = line.split(' ');
    if(item.length==4 && !isNaN(parseFloat(item[0]))) { // skip unwanted line such as header or empty line
        chart1.series[serieIdx].addPoint([parseFloat(item[0]), parseFloat(item[serieIdx+1])], false);
    }
});

而已。你只需要遍历你的 3 个系列就可以了。

关于 HighCharts 中系列的 addPoint 的旁注

请注意，如果您使用无效数据（例如任何内容而不是数字的数组）调用 addPoint ，则不会引发可见的错误，但无论如何它都会破坏某些东西。就我而言，在我添加测试之前

if(item.length==4...

而且由于我最初在最后一行的末尾还有一个 '\n'，所以上部拆分给了我最后一个空字符串，它显然在内部拆分后最终成为 en empty items 数组。这触发了一个 addPoint([NaN, NaN]) ，它纯粹使点之间的线在整个图形中消失了。小心那个！

关于 jsfiddle 示例

jsfiddle 显然不允许 AJAX 获取，而是提供了一个技巧：在 json 中发布数据，jsfiddle 服务器将在给定延迟后重新发送回答案（在我的示例中，我放了 3 秒。）

http://jsfiddle.net/z28vy/

于 2013-11-05T13:00:05.227 回答
0

我没有读过以前的答案，因为很长，但是我总是建议阅读 Highcharts 的教程：http ://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file -csv-xml-json

于 2013-11-05T13:36:42.490 回答