Автоматическое увеличение хайчартов после загрузки

Кто-нибудь знает, как автоматически увеличить часть диаграммы после ее загрузки? У меня много данных временных рядов, но самая важная информация находится справа. Я бы по-прежнему хотел, чтобы все данные были доступны, но были увеличены только последние 7 дней.

То, что я хотел бы смоделировать, — это перетаскивание пользователем 7 последних дней на моем графике. Поэтому, если кто-нибудь знает, как вручную вызвать это событие, возможно, это то, что я хотел бы сделать.

Вот пример диаграммы из jsfiddle с обычной функцией масштабирования: http://jsfiddle.net/Y5q8H/50/

У меня есть несколько других идей о том, как это можно сделать, но я думаю, что я хочу, чтобы это был лучший способ сделать это.

Другие идеи:

1) Загрузите только последние 7 дней, поместите фальшивую кнопку «Сбросить масштаб», которая затем загружает всю серию данных.

2) Обратите внимание на родственный продукт StockCharts, который сейчас находится в стадии бета-тестирования. Кажется, у него есть куча предустановленных дисплеев диапазона, которые тоже было бы здорово иметь. Я не уверен, сколько из моего существующего кода мне придется изменить.


javascript jquery charts highcharts
person RoboKozo    schedule 25.08.2011    source источник

Ответы (3)


arrow_upward
30
arrow_downward

Вы можете использовать функцию setExtremes для изменения масштаба. http://jsfiddle.net/quVda/382/

Для графика временных рядов с ежедневной информацией необходимо использовать представление даты в формате UTC:

var d = new Date();
chart.xAxis[0].setExtremes(
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7),
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
person Dennis    schedule 25.08.2011
comment
Потрясающий! Я настроил это в обработчике событий загрузки, и это сработало отлично. Спасибо :) - person RoboKozo; 25.08.2011
comment
Единственная проблема заключается в том, что кнопка «Сброс масштабирования» не появляется. В любом случае, использовать значение по умолчанию, как если бы вы увеличивали масштаб в обычном режиме? - person RoboKozo; 25.08.2011
comment
Обновлена ​​скрипка на основе источника highcharts. Вы можете добавить элемент на панель инструментов диаграммы: jsfiddle.net/quVda/1 - person Dennis; 25.08.2011
comment
Спасибо большое, Денис! Работает как шарм! ‹3 - person RoboKozo; 25.08.2011
comment
1) jsfiddle не показывает ничего, кроме нажатия кнопки, 2) панель инструментов больше недоступна - person sjngm; 13.03.2015
comment
@sjngm Спасибо, что сообщили мне - теперь это должно работать - person Dennis; 13.03.2015
comment
Более простой способ отобразить кнопку масштабирования после программного вызова setExtremes(): chart.showResetZoom(). См. также этот ответ: stackoverflow.com/questions/19028504/. - person marius; 16.06.2015

arrow_upward
5
arrow_downward

Обновлена ​​официальная скрипта для решения, ребята: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/

$(function() {
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });

    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2007, 0, 1),
            Date.UTC(2007, 11, 31)
        );
    });
});
person Andy Webov    schedule 01.07.2014

arrow_upward
0
arrow_downward

Есть еще вариант, если попробуешь

var max_in = 100; //the highest y value you have in your series data;
var min_in = 41 ;//the lowest y value you have in your series data;

yaxis=this.yAxis[0];
yaxis.options.max = max_in;
yaxis.options.min = min_in;
person zero8    schedule 26.08.2017