Question

我是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。任何帮助将非常感激。提前谢谢。

Answer 1

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

现在发表一些评论

阅读文档

您必须查看非常好的HighChart文档，并在jsfiddle上使用实例。有些非常接近您的用例（显示来自使用AJAX调用获得的数据的数据。）

您需要的特殊之处是获取原始文本数据，这会迫使您进入恼人的解析内容。

了解您在做什么

即使你的代码最终可能正常工作，看起来你的javascript的同步/异步故事也有些混乱。如果你是一个初学者，那么一下子就要学到很多东西。更不用说你试图坚持使用匿名函数的jQuery风格......

缩进！

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

<强>阵列

然后，只需要一点逻辑：你必须知道，虽然动态，javascript中的数组不能在任何未分配的插槽上随机访问（读或写）。所以当你做的时候

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

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

series: []

您可以在ajax成功方法时执行此操作，也可以在选项定义时静态执行此操作，具体取决于您使用的系列数量所需的灵活性。我希望你最初保持简单并做到：

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

就像那样你可以像你一样访问你的3个系列中的每一个......除了你有同样的数据[0]的问题，这个问题由于同样的原因不存在。无论如何不要太在意，因为......

首先使用您的API

无论如何，为系列添加积分的方式实在太复杂了。 series有一个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中添加serie的点注

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

if(item.length==4...

因为我在最后一行的末尾也有一个'\ n'，所以上面的分割给了我一个最后一个空字符串，显然最后是内部分割后的空项目数组。这触发了一个addPoint（[NaN，NaN]）纯粹使点之间的线条在整个图形中消失。小心那个！

关于jsfiddle样本

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

http://jsfiddle.net/z28vy/

Answer 2

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

Highcharts读取文本文件

2 个答案: