修复数据以使用带有莫里斯图的滚动条显示答案

【问题标题】：Fix data to show with scroll bar with morris graph修复数据以使用带有莫里斯图的滚动条显示
【发布时间】：2018-06-05 23:39:17
【问题描述】：

我正在使用带有 php 的 Morris 条形图以及来自 mysql 数据库的数据

现在显示条形图。

我的问题是：

mysql数据库大约有100行，并且每天都在增加。

我的条形图显示日期数据。

我们可以固定天数来显示条形图和水平滚动条来查看以前的数据吗？

我现在使用的代码如下：

<div id="graphdatewise"></div>

<script>
        $(function () {
            var graphdatewise = {
                      element: 'graphdatewise',
                      data: <?php echo json_encode($chartresult);?>,
                      xkey: 'cur_date',
                      ykeys: ['counter', 'counter_unique_visit'],
                      labels: ['PageViews', 'UniqueVisits'],
                      parseTime: true,
                      barColors: ['#F4FA58', '#00FFFF'],
                      xLabels: 'Date',                   
                      xLabelAngle: 70
                    }
                    bar1 = Morris.Bar(graphdatewise)
            });
    </script>

现在使用此代码，条形图会调整大小，并且整个数据会显示在图表中。我们可以用水平滚动条在图表中显示 10 天的数据来访问剩余数据吗？

【问题讨论】：

标签： javascript charts bar-chart morris.js

【解决方案1】：

不可能用 Morris 图表制作 x-scroll。但我想如果你限制父宽度比图表宽度更宽，那应该没问题。比如：

<div id='parent' style='width: 100px;'>
    <div id='graphdatewise' style='width: 50px;'></div>
</div>

【讨论】：