Question

我正在尝试使用morrise图表来构建一个折线图，该图表将根据一周中的天数显示车辆的数字。

问题是当我在 xKey 中使用字符串时，结果如下所示： enter image description here

但如果我用数字替换它们，它就可以正常工作。

这是我的代码。

<div class="col-xs-6">
  <label>Transports Traffic</label>
  <div id="traffic_chart">
    <script>
      new Morris.Area({
        element: 'traffic_chart',
          data: [
            {y: 'Sat', a: 100, b: 90, c:22},
            {y: 'Sun', a: 75, b: 65, c:22},
            {y: 'Mon', a: 50, b: 40, c:22},
            {y: 'Tue', a: 75, b: 65, c:22},
            {y: 'Wed', a: 50, b: 40, c:22},
            {y: 'Thi', a: 75, b: 65, c:22},
            {y: 'Fri', a: 100, b: 90, c:22}
          ],
          xkey: 'y',
          ykeys: ['a', 'b', 'c'],
          labels: ['Cars', 'Bikes', 'Trucks']
       });
     </script>
  </div>
</div>

Answer 1

在morrise库中，X-Key始终解析为日期/时间值。因此，为了防止这种情况并在X-Key中使用字符串值，您必须添加此属性

parseTime: false

在我添加它之后它起作用了。

source

Answer 2

这是我的例子。

$(function() {
    Morris.Area({
        element: 'morris-area-chart-days',
        data: [{
            day: 'Mon',
            a: 95
        }, {
            day: 'Tue',
            a: 66
        }, {
            day: 'Wed',
            a: 86
        }, {
            day: 'Thu',
            a: 151
        }, {
            day: 'Fri',
            a: 115
        }, {
            day: 'Sat',
            a: 93
        }, {
            day: 'Sun',
            a: 38
        }],
        xkey: 'day',
        ykeys: ['a'],
        parseTime: false,
        labels: ['Messages'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
    });
});

Answer 3

在Morrischart中，如果'parseTime'设置为false，那么它会跳过解析X值的时间/日期，否则它将它们视为等间距系列;默认值是parseTime：true ..这就是为什么你在上面的图表中得到问题...所以请你插入以下代码行

分析时：假

重写如下代码，

new Morris.Area({
             ------
             parseTime:false,
             ------
});

Answer 4

使用此...

parseTime：false，

 Morris.Line({
        element: 'morris-line-chart',
        data:  <?php echo json_encode($emparray);?>,
        xkey: 'xco',
        ykeys: ['x1', 'x2'],
        labels: ['x1', 'x2'],
        hideHover: 'auto',
        pointSize: 3,
        parseTime: false,
        resize: true
    });

在morrise图表中使用字符串作为xkey

4 个答案: