Question

我有以下json返回的数据，并喜欢绑定在剑道图

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"
}
});

剑道图表显示不正常，你能不能帮我解决这个问题。

Answer 1

我在代码中进行了大量更正，以使图表正常工作。

以下是您修改后的代码：

 <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作为dataSource传递。
系列修正Unsold的拼写。它与您的数据源密钥不匹配。
在$（function（）{...}）中包装整个代码以确保DOM具有已装载。
从系列中删除了DataSource选项，因为它不是必需的。

以下是您的代码的实时工作示例：

http://dojo.telerik.com/epOVe

Kendo图表数据绑定 - 带有模式的本地Json数据

1 个答案: