javascript - 滚动并放大 morris 图表数据已折叠

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>