morris.js显示部分曲线图

Question

我想制作一个曲线图来显示某些日期的RC需求数量。 X-axis 包含日期，Y-axis 包含值，我还添加了显示 accept/refused 需求百分比的饼图。

当我单独尝试代码时，它可以工作，但是当我将它作为代码的一部分添加到作者文件中时：第一次它不显示任何内容，但一旦我修改了高度和宽度：

饼图有效，但它显示了曲线图的一部分，没有 X-axis，但当我检查它时，它显示完整！

不知道哪里出了问题？！

这是包含数据的 PHP 代码：

<?php  
    $lig = array(
      array(
        "date" => "1/1/2010",
        "value" => "5"
        ),
      array(
        "date" => "5/2/2010",
        "value" => "6"
        ),
      array(
        "date" => "6/3/2010",
        "value" => "7"
        )
      );
    $ar = array(
      array(
        "dec" => "accepté",
        "value" => "49%"
        ),
      array(
        "dec" => "refusé",
        "value" => "51%"
        )        
      );
?>

这里是 HTML 代码的一部分：

<div class="tab-pane fade" id="sec4" role="TabBord">
    <div style="width:800px;margin-top:5%;">
        <h3 class="text-primary text-center">
            Graphes de taux de demandes RCs
        </h3>
        <div class"row">
            <div class="col-sm-10 text-center">
                <label class="label label-success">Courbe des RCs</label>
                <div id="chart" style=" height:200px;width:600px"></div>
            </div>
            <div class="col-sm-2 text-center">
                <label class="label label-success">Cercle des RCs</label>
                <div id="area"  style=" height:200px;width:200px"></div>
            </div>
        </div>
    </div>
</div>

这里是脚本：

<script>
    $(document).ready(function () {
        new Morris.Line({
            element: 'chart',
            data: <?php echo json_encode($lig);?>,
            xkey: 'date',
            ykeys: ['value'],
            labels: ['Nembre de RCs'],
            //pointSize: 2,
            fillOpacity: 0.6,
            hideHover: 'auto',
            parseTime: false,
            behaveLikeLine: true,
            resize: true,
            pointFillColors:['#ffffff'],
            pointStrokeColors: ['black'],
            lineColors:['green']
        });

        new Morris.Donut({
            element: 'area',
            data: [
                {label: "Accepté", value: 49},
                {label: "Refusé", value: 51}
            ]
        });
    });
</script>

这里是我添加的链接：

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

但我得到了这个结果：为什么？

Answer 1

我转向了多库图表包它非常丰富而且非常有用。

那个link；它展示了如何安装它并给出了如何使用它的示例：

它非常适合我

https://github.com/ConsoleTVs/Charts

morris.js显示部分曲线图

morris.js shows a part of curve chart

html

php

morris.js