Question

我想制作一个曲线图，显示某些日期的RC需求数量。 X轴包含日期，Y轴包含值，我还添加了饼图，显示接受/拒绝需求的百分比。

当我单独尝试代码时，它可以工作，但当我在作者文件中添加它作为代码的一部分时：第一次它不显示任何东西，只有一次我修改高度和宽度：

饼图工作但它显示曲线图的一部分并且没有X轴，但是当我检查它时它完全显示它！

我不知道问题出在哪里？！

以下是包含数据的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

我改变方向多库图表包它非常丰富且非常有用。

那个链接;它显示了如何安装它并给出了如何使用它的示例：

它非常适合我

https://github.com/ConsoleTVs/Charts

morris.js显示了曲线图的一部分

1 个答案: