Динамический отклик диаграммы Морриса Значения не отображаются - PullRequest
Новая
       30

Динамический отклик диаграммы Морриса Значения не отображаются

0 голосов
/ 14 мая 2019

Структура данных совпадает с моим ответом, но метки отображаются правильно, а значения не отображаются, пожалуйста, помогите мне. 

$.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"}
]

Пожалуйста, помогите мне ...

Спасибо.

1 Ответ

0 голосов
/ 14 мая 2019

Это будет работать, если вы правильно указали 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>
...