莫里斯图表动态响应值未显示

Question

数据结构与我的回复相同，但标签显示正确但值未显示请有人帮助我

$.ajax(
        {
            type: "POST",url: url1, dataType: "json",
            success: function(response)
            {   


               var areaBar = Morris.Bar({
                element: 'ct_chart_2',
                data: response,
                xkey: 'year',
                ykeys: ['BKG', 'BKM','CSD','others'],
                labels: ['BKG', 'BKM', 'CSD','Others'],
                gridLineColor: 'rgba(33,33,33,0.1)',
                stacked: true,
                hideHover: 'auto',
                barColors: ['#00acf0','#d0d962','#d4d4d4','#E45TFS'],
                resize: true,
                gridTextColor:'#878787',
                gridTextFamily:"Roboto",
                parseTime: false,
                fillOpacity:0.2
            }); 
            }

        });

这是我的ajax回复结果

[
    {"year":"2004","BKG":"1211","BKM":"119","CSD":"334","others":"3"},
    {"year":"2005","BKG":"1599","BKM":"168","CSD":"1586","others":"6"},
    {"year":"2006","BKG":"1088","BKM":"161","CSD":"1213","others":"3"},
    {"year":"2007","BKG":"1018","BKM":"118","CSD":"1552","others":"5"},
    {"year":"2008","BKG":"1011","BKM":"335","CSD":"1406","others":"8"},
    {"year":"2009","BKG":"912","BKM":"153","CSD":"1935","others":"3"},
    {"year":"2010","BKG":"825","BKM":"214","CSD":"2012","others":"1"},
    {"year":"2011","BKG":"727","BKM":"208","CSD":"2821","others":"12"},
    {"year":"2012","BKG":"905","BKM":"301","CSD":"4336","others":"4"},
    {"year":"2013","BKG":"731","BKM":"371","CSD":"3034","others":"6"},
    {"year":"2014","BKG":"719","BKM":"506","CSD":"2354","others":"6"},
    {"year":"2015","BKG":"571","BKM":"630","CSD":"2055","others":"6"},
    {"year":"2016","BKG":"488","BKM":"641","CSD":"1650","others":"7"},
    {"year":"2017","BKG":"5","BKM":"0","CSD":"0","others":"0"},
    {"year":"2019","BKG":"1","BKM":"0","CSD":"0","others":"0"}
]

请帮助我...

谢谢。

Answer 1

如果您正确指定 ykeys，它将起作用，例如：

ykeys: ['BKG', 'BKM', 'CSD', 'others']

请注意，您在代码中使用 小写字母 ykeys，例如 bkg、bkm 和 csd：

示例：

const data = [{"year":"2004","BKG":"1211","BKM":"119","CSD":"334","others":"3"},{"year":"2005","BKG":"1599","BKM":"168","CSD":"1586","others":"6"},{"year":"2006","BKG":"1088","BKM":"161","CSD":"1213","others":"3"},{"year":"2007","BKG":"1018","BKM":"118","CSD":"1552","others":"5"},{"year":"2008","BKG":"1011","BKM":"335","CSD":"1406","others":"8"},{"year":"2009","BKG":"912","BKM":"153","CSD":"1935","others":"3"},{"year":"2010","BKG":"825","BKM":"214","CSD":"2012","others":"1"},{"year":"2011","BKG":"727","BKM":"208","CSD":"2821","others":"12"},{"year":"2012","BKG":"905","BKM":"301","CSD":"4336","others":"4"},{"year":"2013","BKG":"731","BKM":"371","CSD":"3034","others":"6"},{"year":"2014","BKG":"719","BKM":"506","CSD":"2354","others":"6"},{"year":"2015","BKG":"571","BKM":"630","CSD":"2055","others":"6"},{"year":"2016","BKG":"488","BKM":"641","CSD":"1650","others":"7"},{"year":"2017","BKG":"5","BKM":"0","CSD":"0","others":"0"},{"year":"2019","BKG":"1","BKM":"0","CSD":"0","others":"0"}]

var areaBar = Morris.Bar({
  element: 'ct_chart_2',
  data: data,
  xkey: 'year',
  ykeys: ['BKG', 'BKM','CSD','others'],
  labels: ['BKG', 'BKM', 'CSD','Others'],
  gridLineColor: 'rgba(33,33,33,0.1)',
  stacked: true,
  hideHover: 'auto',
  barColors: ['#00acf0','#d0d962','#d4d4d4','#fsddfs'],
  resize: true,
  gridTextColor:'#878787',
  gridTextFamily:"Roboto",
  parseTime: false,
  fillOpacity:0.2
});

#ct_chart_2 {
  width: 500px;
  height: 200px;
}

<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="ct_chart_2"></div>

莫里斯图表动态响应值未显示

Morris charts dynamic response Values not showing

javascript

charts

morris.js

示例：