Обновление строки morris.js ymin

1

Есть ли способ обновить ymin строки/области morris.js? Я пробовал:

chart.ymin = 10

но ymin все равно 0.

Когда это невозможно в morris.js, есть ли какие-либо другие библиотеки, которые включают такую функцию?

Теги:
charts
morris.js

1 ответ

1
Лучший ответ

Решение 1

Убедитесь, что вы установили для параметра Morris параметр resize значение true.

Затем, по вашему действию, вы можете установить ymin, перерисовать диаграмму и убедиться, что диаграмма хорошо расположена (вызывать изменение размера окна):

chart.ymin = 10;
chart.redraw();
$(window).trigger("resize");

Попробуйте следующий фрагмент:

var data = [
   { Date: '2016-01-01', Sales: 10 },
   { Date: '2016-01-02', Sales: 20 },
   { Date: '2016-01-03', Sales: 40 },
   { Date: '2016-01-04', Sales: 5 },
   { Date: '2016-01-05', Sales: 50 }
];

var chart = new Morris.Line({
  element: 'chartLine',
  data: data,
  xkey: 'Date',
  ykeys: ['Sales'],
  labels: ['Sales'],
  resize: true,
  xLabels: 'day',
  parseTime: false
});

$(".ymin").on("click", function() {
  chart.ymin = 10;
  chart.redraw();
  $(window).trigger("resize");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="chartLine"></div>
<div class="ymin">Set ymin</div>


Решение 2

Установите параметр Морриса resize ложь для температурного графика.

Убедитесь, что вы добавили Morris CSS, доступный на Morris GitHub. Без этого CSS, зависание диаграммы отобразит данные в нижней части диаграммы и скроет ось x в следующем обновлении данных из setInterval.

Удалите код, пытающийся получить/установить высоту графика, вызывая изменение размера окна и вызывая перерисовку диаграммы температуры.

Наконец добавьте следующий код в вашу функцию $(document).ready:

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

$(window).resize(function () {
    delay(function () {
        TemperatureChart.redraw();
    }, 300);
}).trigger('resize');

Пожалуйста, попробуйте следующую вилку своего CodePen: codepen.io/krlzlx/pen/prwMLr

  • 0
    Спасибо, все отлично работает. За исключением одной маленькой (через несколько часов большой) проблемы. После каждого его выполнения все диаграммы, а не только одна, которую я изменяю, увеличиваются на случайное количество пикселей. ( imgur.com/a/cDG90 ) Страница должна выглядеть следующим образом: imgur.com/a/0mKCm . У вас есть идея или это лучший способ открыть вопрос на Morris JS?
  • 0
    К сожалению, Моррис не обновлялся в течение некоторого времени, поэтому я не думаю, что вы получите помощь по проблеме. Я тоже боролся с ростом графиков. Мне удалось решить эту проблему, но не помню точно, как. Вы можете попытаться установить svg height как $('svg').height(800) если я прав. Скажи мне, если это поможет.
Показать ещё 7 комментариев

Ещё вопросы

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