莫里斯线图Y轴刻度没有完全显示?为什么

时间:2015-01-08 00:21:23

标签: javascript jquery html

Morris折线图未显示完整的y轴刻度值。这意味着左侧(刻度)只显示两位数字并帮我解决?

Screenshot of chart

asp.net

  1. morris& raphael-min.js添加在标题脚本部分

  2. 在表单中声明div。

  3. javascript:

  4. 
    
    var datajson=[{period:2013,MaleFemale:22182237,Male:20190125,Female:1992112},{period:2014,MaleFemale:21884833,Male:19874210,Female:2010623},{period:2015,MaleFemale:21569162,Male:19543674,Female:2025488},{period:2016,MaleFemale:21259490,Male:19218016,Female:2041474},{period:2017,MaleFemale:20959502,Male:18901107,Female:2058395},{period:2018,MaleFemale:20657767,Male:18581646,Female:2076121},{period:2019,MaleFemale:20360597,Male:18265939,Female:2094658},{period:2020,MaleFemale:20071747,Male:17958012,Female:2113735},{period:2021,MaleFemale:19778233,Male:17646048,Female:2132185},{period:2022,MaleFemale:19489609,Male:17338791,Female:2150818},{period:2023,MaleFemale:19203678,Male:17034845,Female:2168833}];
    
    $('#trendchart1').empty();
    new Morris.Line({
      element: 'trendchart1',
      data: datajson,
      xkey: ['period'],
      ykeys: ['Male', 'Female'],
      labels: ['Total Male', 'Total Female'],
      fillOpacity: 0.6,
      hideHover: 'auto',
      behaveLikeLine: true,
      resize: true,
      pointFillColors: ['#ffffff'],
      pointStrokeColors: ['black'],
      lineColors: ['gray', 'red']
    });
    
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/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>
    
    <div id="trendchart1" style="height: 250px; width:600px"></div>
    &#13;
    &#13;
    &#13;

    JSON:

    period  MaleFemale  Male        Female
    2013    22182237    20190125    1992112
    2014    21884833    19874210    2010623
    2015    21569162    19543674    2025488
    2016    21259490    19218016    2041474
    2017    20959502    18901107    2058395
    2018    20657767    18581646    2076121
    2019    20360597    18265939    2094658
    2020    20071747    17958012    2113735
    2021    19778233    17646048    2132185
    2022    19489609    17338791    2150818
    2023    19203678    17034845    2168833
    

0 个答案:

没有答案