Highcharts series.data не работает для меня - PullRequest
Новая
       5

Highcharts series.data не работает для меня

0 голосов
/ 23 мая 2018

Я пытаюсь использовать данные из 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>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Правильный ответ (спасибо 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>
0 голосов
/ 23 мая 2018

Похоже, вы не получаете arr при определении

, вот рабочий пример https://jsfiddle.net/nageen/oxrL8fd2/

Я сделал его статическим, потому что ваш CSV-файл не содержит никаких данных.Вы должны проверить, почему вы не получаете данные из файла CSV.я просто хочу показать, что все хорошо, кроме вас arr[1], потому что arr получает данные из CSV, а если CSV не предоставляет данные, то arr опустеет и не отобразит график.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...