График Highcharts не виден

0

Я работаю над графиком, но это не видно.

В моем коде есть две строки, одна из которых работает, а другая - не работает. (Я прокомментировал их)

//this line does not work
//data3.push([new Date(d.timestamp).getTime(),data.data.risk);

//this line works
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);

Моя цель: я хочу запустить строку, которая не работает.

Я думаю, что я не передаю данные правильно. Я хочу передать массив под названием risk чтобы сделать график.

Просто скопируйте код в файл, и он должен работать.

<!DOCTYPE html>
<html>

<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

</head>

<body style="background:#212224;">

<div id="container2" style="max-width: 1666px;  margin: 0 auto"></div>

<script type="text/javascript">

   $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
        console.log("data is : ");
        console.log(data);

                    var minX = _.min(data.data.risk, function (d) {
                        return new Date(d.timestamp).getTime();
                    });
                    var maxX = _.max(data.data.risk, function (d) {
                        return new Date(d.timestamp).getTime();
                    });


         var data3 = [];

          $.each(data.data.risk, function (i, d) {

                        //this line does not work
                        //data3.push([new Date(d.timestamp).getTime(),data.data.risk);

                        //this line works
                        data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
                 });




        $('#container2').highcharts({

            chart: {
            backgroundColor: '#000000',
                },

            title: {
                text: 'Test Graph',
                style: {
                color: '#FFFFFF',
                fontWeight: 'bold'
                }
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time Stamp'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1

            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                gridLineColor: 'grey',
                gridLineWidth: 1,
                lineWidth:1
            },
            legend: {
                enabled: true
            },

            exporting: false,



            plotOptions: {
                line: {                 
                    lineColor: 'red',
                    fillOpacity: 1,                    
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 2
                        }
                    },
                    threshold: null,
                    marker: {
                        fillColor: '#e57255'
                        }


                },


            },

            series: [{
                name: 'Graph',
                data: data3
            }]
        });
    });

</script>
</body>
</html>
  • 0
    Вы получили какую-либо ошибку в консоли?
Теги:
frontend
highcharts

1 ответ

1

Я предполагаю, что вы хотите, чтобы value от risk. Вы уже перечислили все элементы risk в этой строке: $.each(data.data.risk, function (i, d) {

Чтобы получить значения risk используйте строку: data3.push([new Date(d.timestamp).getTime(),d.value]);

Вы можете проверить приведенный ниже пример.

    <!DOCTYPE html>
    <html>

    <head>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

    </head>

    <body style="background:#212224;">

    <div id="container2" style="max-width: 1666px;  margin: 0 auto"></div>

    <script type="text/javascript">

       $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
            console.log("data is : ");
            console.log(data);

                        var minX = _.min(data.data.risk, function (d) {
                            return new Date(d.timestamp).getTime();
                        });
                        var maxX = _.max(data.data.risk, function (d) {
                            return new Date(d.timestamp).getTime();
                        });


             var data3 = [];

              $.each(data.data.risk, function (i, d) {

                            //this line does not works
                            data3.push([new Date(d.timestamp).getTime(),d.value]);

                            //this line works
                            // data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
                     });




            $('#container2').highcharts({

                chart: {
                backgroundColor: '#000000',
                    },

                title: {
                    text: 'Test Graph',
                    style: {
                    color: '#FFFFFF',
                    fontWeight: 'bold'
                    }
                },
                xAxis: {
                    type: 'datetime',
                    title: {
                        text: 'Time Stamp'
                    },
                    gridLineColor: 'grey',
                    gridLineWidth: 1,
                    lineWidth:1

                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    gridLineColor: 'grey',
                    gridLineWidth: 1,
                    lineWidth:1
                },
                legend: {
                    enabled: true
                },

                exporting: false,



                plotOptions: {
                    line: {                 
                        lineColor: 'red',
                        fillOpacity: 1,                    
                        lineWidth: 2,
                        states: {
                            hover: {
                                lineWidth: 2
                            }
                        },
                        threshold: null,
                        marker: {
                            fillColor: '#e57255'
                            }


                    },


                },

                series: [{
                    name: 'Graph',
                    data: data3
                }]
            });
        });

    </script>
    </body>
    </html>

Выход: Изображение 174551

Поделиться
  • 0
    Хорошо, спасибо ... это работает ... есть идеи, почему так долго рендерит график?
  • 0
    пожалуйста, скопируйте и вставьте полный код. и подожди пару минут. ваш JSON имеет огромные данные
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню