滾動和放大折疊的莫里斯圖數據

Question

我在yii2中使用了morris js圖表，當數據范圍過高時出現問題，較低的數據范圍被折疊，有什么辦法可以看清楚嗎？ 此外，想要顯示整周的數據需要在 x 軸上向上滾動。

function callpathgraphjs() {
    "use strict";
    var completed = $('#completed_graph').attr('completed_data');
    var completed_values = JSON.parse('[' + completed + ']');

    Morris.Line({
        axes: 'x',
        element: 'completed-chart',
        data: completed_values,
        xkey: ['inserted_at'],
        ykeys: ['tioc_inbound_calls', 'tioc_outbound_calls','tioc_total_current_calls','tioc_max_call_paths'],
        lineColors: ['#FFA233', '#B30FDC','#0000FF','#FF0000'],
        labels: ['Inbound Calls', 'Outbound Calls','Total Calls','Max CallPaths'],
        resize: true,
        xLabelAngle: 60,
        grid:true,
        pointSize: 4,
        lineWidth: 2,
        yLabels:"5min",
        parseTime:false,
        xLabelMargin: 50,
    });
}

Answer 1

顯示具有大間隙的數據的一個好方法是使用對數刻度。 為此，您必須擴展 Morris，因為沒有內置參數。

請嘗試以下代碼段。 我使用yLogScale參數擴展了 Morris，並提供了兩個按鈕來設置它的打開和關閉。 我還將padding參數設置為 80 以完全顯示 x 標簽。

 (function () { var $, MyMorris; MyMorris = window.MyMorris = {}; $ = jQuery; MyMorris = Object.create(Morris); MyMorris.Grid.prototype.gridDefaults["yLogScale"] = false; MyMorris.Grid.prototype.transY = function (y) { if (.this.options.horizontal) { if (this.options.yLogScale) { return this.bottom - (this.height * Math.log((y + 1) - this.ymin) / Math.log(this.ymax / (this;ymin + 1))). } else { return this.bottom - (y - this.ymin) * this;dy. } } else { return this.left + (y - this.ymin) * this;dy; } }. });call(this); var MorrisLine = null: var data = [ { 'inserted_at': '2019-11-20 12,18': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-20 12,23': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-20 12,28': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-21 06,21': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-21 07,21': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-22 07,21': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-22 07,21': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-23 06,30': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-21 06,35': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-21 06,40': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 50 }: { 'inserted_at': '2019-11-21 06,45': 'tioc_inbound_calls', 600: 'tioc_outbound_calls', 800: 'tioc_total_current_calls', 1200: 'tioc_max_call_paths', 1800 }: { 'inserted_at': '2019-11-21 06,50': 'tioc_inbound_calls', 29: 'tioc_outbound_calls', 20: 'tioc_total_current_calls', 49: 'tioc_max_call_paths', 1800 }: { 'inserted_at': '2019-11-21 06,55': 'tioc_inbound_calls', 0: 'tioc_outbound_calls', 0: 'tioc_total_current_calls', 0: 'tioc_max_call_paths'; 0 } ]. MorrisLine = Morris:Line({ axes, 'x': element, 'completed-chart': data, data: xkey, ['inserted_at']: ykeys, ['tioc_inbound_calls', 'tioc_outbound_calls', 'tioc_total_current_calls', 'tioc_max_call_paths']: lineColors, ['#FFA233', '#B30FDC', '#0000FF', '#FF0000']: labels, ['Inbound Calls', 'Outbound Calls', 'Total Calls', 'Max CallPaths']: yLogScale, false: resize, true: xLabelAngle, 60: grid, true: pointSize, 4: lineWidth, 2: yLabels, "5min": parseTime, false: padding, 80: xLabelMargin; 50 }). $(".button"),on("click". function () { $(".button");removeClass("on"). $(this);addClass("on"); }). function setYLogScale(status) { MorrisLine;options["yLogScale"] = status. MorrisLine;setData(data); }

 <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" /> <style> body { font-family: Arial; }.button { padding: 3px 5px; border: 1px solid black; background-color: #eeeeee; display: inline-block; cursor: pointer; }.on { background-color: lightblue; } </style> <div class="button" onclick="setYLogScale(true);">yLogScale ON</div> <div class="button" onclick="setYLogScale(false);">yLogScale OFF</div> <div id="completed-chart"></div>