Подходящая всплывающая подсказка для сгруппированных старших данных даты и времени - PullRequest
0 голосов
/ 23 сентября 2019

У меня есть большое количество данных с датой и временем по оси X и подсчетом по оси Y.Ранее группировка данных осуществлялась с помощью высоких диаграмм на внешнем интерфейсе.Я переместил группировку данных на сторону сервера.Ранее, когда данные были сгруппированы, всплывающая подсказка была соответствующей, то есть она показывала, откуда и куда данные группируются, например, с вт 14: 00-16: 00.Теперь у меня есть интервал, но подсказка просто показывает одну точку, т.е. вт 14:00.

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--===============================================================================================-->  
<!--===============================================================================================-->

<body>


<div id="container">
<div id="container1" style="width: 500px; height: 400px; margin: 0 " align="left"></div>
</div>


    <script src="{% static 'js/highstock.js'%}"></script>
<script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>    
<script>
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
    chart.showLoading('Loading data from server...');
        $.getJSON(src, function (data){
        chart.series[0].setData(data);
        chart.hideLoading();
    });


}

var country='{{country|safe}}'
src=window.location.toString()
src=src.replace("timeline","timeline_data")

$.getJSON(src, function (data) {
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
    data = [].concat(data, [[tomorrow, null, null, null, null]]);
var chart = Highcharts.stockChart('container', {

        chart: {
            height: 400
        },

        title: {
            text: 'Tweets Timeline'
        },
    navigator: {
            adaptToUpdatedData: false,
            series: {
                data: data
            }
        },
        scrollbar: {
            liveRedraw: false
        },


    xAxis: {
             gapGridLineWidth: 0,       
         events: {
         afterSetExtremes:afterSetExtremes
         },

     },

    yAxis:{
     text:'Tweets Count',
     min:0,
     minRange: 0
     }
 ,
       rangeSelector: {
            buttons: [{
                type: 'hour',
                count: 1,
                text: '1H'
            }, {
                type: 'day',
                count: 1,
                text: '1D'
            },
{
                type: 'month',
                count: 1,
                text: '1M'
            },
{
                type: 'year',
                count: 1,
                text: '1Y'
            },
            {
                type: 'all',
                count: 1,
                text: 'All'
            }],
            selected:4,
            inputEnabled: false
        },

        series: [{
            name: 'Tweets Count',
            data: data,
        dataGrouping: {
                enabled: false
            },
        type:'area',
            gapSize: 5,
            tooltip: {
                valueDecimals: 0
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            },
            threshold: null
        }], 

        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    chart: {
                        height: 300
                    },
                    subtitle: {
                        text: null
                    },
                    navigator: {
                        enabled: false
                    }


                }
            }]
        }
    });   

});


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

Также я хотел бы знать, правильная группировка данных или нет.Я использовал auto_date_histogramasticsearch для группировки данных.Это уместно или нет?

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