morris.js line update ymin

Question

morris.jsの行/エリアのyminを更新する方法はありますか？ 私はそれを試してみた：

chart.ymin = 10 

が、YMINは0

それ `sは不可能morris.jsで、そのような機能が含まれ、他のチャートlibarysがあるまだありますか？

Answer 1

ソリューション1

あなたがtrueにモリスパラメータresizeを設定していることを確認します。

次に、あなたの行動に、あなたは（ウィンドウのサイズ変更をトリガ）のチャートを再描画し、グラフがうまく配置されていることを確認し、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

Morrisパラメータresizeを温度チャートに設定します。

Morris GitHubに利用可能なMorris CSSが含まれていることを確認してください。このCSSがないと、チャートをホバーするとチャートの下にデータが表示され、setIntervalから次のデータ更新時にx軸が非表示になります。

グラフの高さを取得/設定しようとするコードを削除し、ウィンドウのサイズ変更をトリガし、温度チャートの再描画を呼び出します。

最後に、あなたの$(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