Есть ли способ обновить ymin строки/области morris.js? Я пробовал:
chart.ymin = 10
но ymin все равно 0.
Когда это невозможно в morris.js, есть ли какие-либо другие библиотеки, которые включают такую функцию?
Решение 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>
Установите параметр Морриса 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
svg
height как$('svg').height(800)
если я прав. Скажи мне, если это поможет.