剑道图表数据绑定 - 本地JSON数据与模式

我有以下JSON返回数据，并希望在剑道图表绑定剑道图表数据绑定 - 本地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" 
 
} 
 
});

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

来源

2016-10-24 DotNetDev

我已经在代码中做了很多更正，以使您的图表工作。

下面是修改后的代码：

<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

来源

2016-10-24 04:25:12

非常感谢你的帮助，我查了一下，这是你所提供的链接工作，但是当我尝试相同在我的网站链接按钮点击后，图表没有绘制，并在y轴没有相关数据，显示的东西0,0.2,0.4,0.8，没有在x轴... – DotNetDev

只是复制我的代码，并尝试跑。可能是你仍然失去了一些东西。 –

谢谢...这是工作...有在我的JSON返回问题...所以我只是将返回值转换为JavaScript对象..然后它的工作... 您的帮助表示赞赏。 – DotNetDev

剑道图表数据绑定 - 本地JSON数据与模式

回答

相关问题