Вопрос:

HighChart: Как получить точную точку / метку времени из plotBands, нажмите

javascript charts highcharts

360 просмотра

1 ответ

11791 Репутация автора

введите описание изображения здесь

Я щелкнул в желтой области PlotBands, когда было выделено воскресенье, 3 января 2010 года. Я хочу иметь возможность получить эту дату в событии клика ниже.


http://jsfiddle.net/leongaban/a6hqx5eb/

Ниже вы можете увидеть clickфункцию с простым журналомevent

$(function () {
    var $report = $('#report');

    $('#container').highcharts({
        xAxis: {
            plotBands: [{ // mark the weekend
                color: '#FCFFC5',
                from: Date.UTC(2010, 0, 2),
                to: Date.UTC(2010, 0, 4),
                events: {
                    click: function (e) {
                        console.log(e)
                        $report.html(e.type);
                    },
                    mouseover: function (e) {
                        $report.html(e.type);
                    },
                    mouseout: function (e) {
                        $report.html(e.type);
                    }
                }
            }],
            tickInterval: 24 * 3600 * 1000,
            // one day
            type: 'datetime'
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000
        }]
    });
});

И это все, что он печатает, я пытаюсь найти точную точку / эпоху, на которую нажал пользователь. Единственный ключ, который имеет смысл, timeStamp:2840.135однако, ничего мне не говорит.

введите описание изображения здесь

Автор: Leon Gaban Источник Размещён: 22.08.2016 09:01

Ответы (1)


1 плюс

11791 Репутация автора

Решение

Нашел это! this.options.value

const formatPlotLine = _.curry((chart, color, alert) => {
    return {
        color: color,
        value: toMilliseconds(alert.start_epoch),
        width: 2,
        id: 'alert-plotline',
        events: {
            click: function() {
                // console.log('alert-plotline Clicked');
            },
            mouseover: function(e) {
                this.axis.chart.get('x-axis-alert').addPlotLine({
                    value: this.options.value,
                    color: 'red',
                    width: 4,
                    id: this.options.value
                });

                let target = {
                    name: alert.term,
                    type: alert.type,
                    percent: Math.floor(alert.percent_change)
                }
                TooltipFactory.updateToolTipPoints('alert', target);
            },
            mouseout: function(e) {
                this.axis.chart.get('x-axis-alert').removePlotLine(this.options.value);
            }
        }
    }
Автор: Leon Gaban Размещён: 22.08.2016 09:55
Вопросы из категории :
32x32