Question

我试图使用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>

Answer 1

看起来你没有arr定义

这是工作示例https://jsfiddle.net/nageen/oxrL8fd2/

我已将其设为静态，因为您的CSV文件未提供任何数据。你必须检查为什么你没有从CSV文件中获取数据。我只是希望显示一切都很好，除了arr[1]因为arr从CSV获取数据，如果CSV不提供数据，那么arr将会清空并且不会显示图形。

Answer 2

正确答案（感谢askerovlab）：

<!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>

Highcharts series.data不适合我

2 个答案: