Прокрутка и масштабирование данных диаграммы Морриса свернуты - PullRequest
Новая
       41

Прокрутка и масштабирование данных диаграммы Морриса свернуты

1 голос
/ 21 ноября 2019

enter image description here Я использовал диаграмму Морриса js в yii2, у меня проблема, когда диапазон данных становится слишком большим, нижний диапазон данных сжимается, есть ли способ ясно это увидеть? Кроме того, хотите показать данные за всю неделю, для этого нужно прокрутить вверх по оси 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,
    });
}

1 Ответ

1 голос
/ 21 ноября 2019

Хороший способ отображения данных с большими пробелами - использовать логарифмическую шкалу. Для этого вам нужно расширить Morris, поскольку в нем нет встроенного параметра.

Пожалуйста, попробуйте следующий фрагмент. Я расширил Morris параметром yLogScale и предоставил две кнопки для его включения и выключения. Я также установил для параметра 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>
...