Блог

Ниже приведены возвращенные данные в формате json, которые я хотел бы привязать к диаграмме Kendo

 var stockReportingList= {
"StockDetails" : [
{"Total" : 230, "Sold" : 200, "Unsold" : 30,  "Month" : "Jan 2016" },
{"Total" : 550, "Sold" : 430, "Unsold" : 220,  "Month" : "Feb 2016" },
{"Total" : 200, "Sold" : 100, "Unsold" : 100,  "Month" : "Mar 2016" }
]
}  

ниже приведен мой скрипт для построения диаграммы

 $("#MarketStockChart").kendoChart({
dataSource : {
data : stockReportingList
},
seriesDefaults : {
type : "column",
stack: true
},

series : [{
field : "Sold"
name : "Sold"
data : stockReportingList
},
{
field : "UnSold"
name : "UnSold"
data : stockReportingList`enter code here`
}],

valueAxis : {
labels : {
format : "{0}",
visible : true,
position : "top"
}

},

categoryAxis :
{
field : "Month"
}
});  

Диаграмма Kendo не отображается должным образом, не могли бы вы, пожалуйста, помочь мне исправить это.

Мне пришлось внести множество исправлений в ваш код, чтобы заставить ваши диаграммы работать.

Ниже приведен ваш измененный код:

  <script>
  var stockReportingList = {
     "StockDetails": [{
         "Total": 230,
         "Sold": 200,
         "Unsold": 30,
         "Month": "Jan 2016"
     }, {
         "Total": 550,
         "Sold": 430,
         "Unsold": 220,
         "Month": "Feb 2016"
     }, {
         "Total": 200,
         "Sold": 100,
         "Unsold": 100,
         "Month": "Mar 2016"
     }]
 };

 $(function() {
     $("#MarketStockChart").kendoChart({
         dataSource: {
             data: stockReportingList.StockDetails
         },
         seriesDefaults: {
             type: "column",
             stack: true
         },

         series: [{
             field: "Sold",
             name: "Sold"
         }, {
             field: "Unsold",
             name: "Unsold"
         }],

         valueAxis: {
             labels: {
                 format: "{0}",
                 visible: true,
                 position: "top"
             }
         },
         categoryAxis: {
             field: "Month"
         }
     });
 });
  </script>
  

Я упоминаю несколько изменений, которые мне пришлось внести:

• Я передал stockReportingList.StockDetails в качестве источника данных.
• Исправлено написание непроданных последовательно. Это не соответствовало вашему ключу источника данных.
• Завернул весь код в $(function() {…}), чтобы убедиться, что DOM был загружен.
• Удален параметр DataSource из серии, поскольку он не требовался.

Ниже приведен живой рабочий пример для вашего кода:

http://dojo.telerik.com/epOVe