Javascript Highcharts series.data不适用于我_Javascript_Highcharts

Javascript Highcharts series.data不适用于我

javascript highcharts

Javascript Highcharts series.data不适用于我,javascript,highcharts,Javascript,Highcharts,我正在尝试使用csv中的数据制作图表。我包含了csv解析器代码，但您不必阅读它；我从console.log确认它工作正常。arr[1]看起来像这样： [[1,2], [3,4], [5,7]] 我将arr[1]传递给series.data（靠近底部）；然而，我得到了一张空白的图表。我试图得到一个简单的（x，y）线图。我做错了什么？提前感谢您的帮助编辑：我将上面的2D数组粘贴到series.data中，它生成了一个图形……我想我的解析器代码是在我的Highcharts代码之后运行的。这是为

我正在尝试使用csv中的数据制作图表。我包含了csv解析器代码，但您不必阅读它；我从console.log确认它工作正常。arr[1]看起来像这样：

[[1,2],
 [3,4],
 [5,7]]

我将arr[1]传递给series.data（靠近底部）；然而，我得到了一张空白的图表。我试图得到一个简单的（x，y）线图。我做错了什么？提前感谢您的帮助

编辑：我将上面的2D数组粘贴到series.data中，它生成了一个图形……我想我的解析器代码是在我的Highcharts代码之后运行的。这是为什么/我该如何解决这个问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Stock Data - Highcharts</title>


            <!-- 1. Add these JavaScript inclusions in the head of your page -->       
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/modules/boost.js"></script>
            <script src="https://code.highcharts.com/modules/data.js"></script>

            <!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
            <script>

            //CSV parser

                var arr = new Array();
                function successFunction(data) {

                    var allRows = data.split(/\r?\n|\r/);

                    for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
                        var this_row = allRows[singleRow].split(',')
                        if (singleRow === 0) {
                            //start at the first yaxis column
                            for (var i = 1; i < this_row.length; i++) {
                                arr[i] = new Array();
                            }
                        }
                        else {
                            for (var i = 1; i < this_row.length; i++) {
                                var a = Number(this_row[0]);
                                var b = Number(this_row[i]);
                                var temp_arr = [a, b];
                                arr[i].push(temp_arr);
                            }
                        }
                    }

                    console.log(arr[1])
                }
                var csv_name = "just-prices-sample.csv"
                $.ajax({
                  url: csv_name,
                  dataType: 'text',
                }).done(successFunction);

            //end of CSV parser

          document.addEventListener('DOMContentLoaded', function () {

              Highcharts.chart('container', {
                    chart: {
                        type: 'line'
                    },
                    rangeSelector: {
                        selected: 1
                    },
                    title: {
                        text: 'Stock Price'
                    },
                    yAxis: {
                        title: {
                            text: 'Price (Dollars)'
                        }
                    },
                    series : [{
                        data: arr[1],
                        type: 'line'
                    }]
                });
            });

            </script>

        </head>
        <body>

            <!-- 3. Add the container -->
            <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>                
        </body>
    </html>


股票数据-高位图表
//CSV解析器
var arr=新数组（）；
函数成功函数（数据）{
var allRows=data.split（/\r？\n |\r/）；
对于（var singleRow=0；singleRow

看起来你没有得到你定义的

arr

下面是一个工作示例

我已经使它成为静态的，因为您的CSV文件没有提供任何数据。您必须检查为什么不从CSV文件获取数据。我只想说明一切都很好，除了您

arr[1]

，因为arr从CSV获取数据，如果CSV不提供数据，则

arr

将为空，并且不显示图形。

正确答案（感谢askerovlab）：


股票数据-高位图表
//CSV解析器
var arr=新数组（）；
函数成功函数（数据）{
var allRows=data.split（/\r？\n |\r/）；
对于（var singleRow=0；singleRow{successFunction（数据）；chartsFunction（）；}）
});

您确定数组中的值是数字吗？它们可能是字符串，如果我没记错的话，它们应该是图表的数字。它们是数字。您可以从解析器中的else语句中看到。我相信问题在于解析器代码是在我的Highcharts代码之后运行的。知道为什么吗？因为它是异步的。然后，您应该在另一个函数中创建Highcharts.chart部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Stock Data - Highcharts</title>


        <!-- 1. Add these JavaScript inclusions in the head of your page -->       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/boost.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>

        <!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
        <script>

        //CSV parser

            var arr = new Array();
            function successFunction(data) {

                var allRows = data.split(/\r?\n|\r/);

                for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
                    var this_row = allRows[singleRow].split(',')
                    if (singleRow === 0) {
                        //start at the first yaxis column
                        for (var i = 1; i < this_row.length; i++) {
                            arr[i] = new Array();
                        }
                    }
                    else {
                        for (var i = 1; i < this_row.length; i++) {
                            var a = Number(this_row[0]);
                            var b = Number(this_row[i]);
                            var temp_arr = [a, b];
                            arr[i].push(temp_arr);
                        }
                    }
                }

                console.log(arr[1]);
            }


        //end of CSV parser


            function chartsFunction() {
              Highcharts.chart('container', {
                    chart: {
                        type: 'line'
                    },
                    rangeSelector: {
                        selected: 1
                    },
                    title: {
                        text: 'Stock Price'
                    },
                    yAxis: {
                        max: 25,
                        title: {
                            text: 'Price (Dollars)'
                        }
                    },
                    series : [{
                        data: arr[1],
                        type: 'line'
                    }]
                });
              }


      document.addEventListener('DOMContentLoaded', function () {
          var csv_name = "just-prices-sample.csv"
            $.ajax({
              url: csv_name,
              dataType: 'text',
            }).done((data) => { successFunction(data); chartsFunction(); })
        });

        </script>

    </head>
    <body>

        <!-- 3. Add the container -->
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>                
    </body>
</html>