KendoUI图表数据源

本文介绍了KendoUI图表数据源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有这个代码来绘制剑道饼图...它是从json读取数据...图表的标题出现但图表没有出现 < div id = chart> < / div > < script> function createChart（）{ $（ #chart）。kendoChart（{ dataSource：{ transport：{ read：{ dataType： json， url： / home / getData } } }， title：{ text： 2008年西班牙电力生产的分裂 }， legend：{ 仓位： bottom }， 系列：[{类型： pie，字段： 百分比， categoryField： source， explodeField： explode }]， seriesColors：[ ＃42a7ff​​， ＃666666， ＃999999， ＃cccccc]，工具提示： { visible： true ，模板： $ {category} - $ {v alue}％ } }）; } $（ document ）。ready（createChart）; $（ document ）。bind（ kendo：skinChange，createChart）; < / script> 这是返回json的函数 public ActionResult getData（） { var data = [{'source'：'Hydro '，'百分比'：22，'爆炸'：真}，{'来源'：'太阳'，'百分比'：2，'爆炸'：假}，{'来源'：'核'，'百分比'： 49，'explode'：false}，{'source'：'Wind'，'percentage'：27，'explode'：false}]; // 返回数据; return this .Content（data， application / json）; 解决方案 （ #chart）。kendoChart（{ dataSource：{ transport：{ read：{ dataType： json， url： / home / getData } } }， title：{ text： 2008年西班牙电力生产的分裂 }，传奇：{位置： bottom }， 系列：[{类型： pie，字段： 百分比， categoryField： source ， explodeField： explode }]， seriesColors：[ ＃42a7ff​​， ＃666666， ＃999999 ， ＃cccccc]，工具提示：{可见： true ，模板： {category} - {value}％ } }）; } I have this code to draw kendo pie chart...and it's read data from json...the the title of the chart appear but the chart not appear<div id="chart"></div> <script> function createChart() { $("#chart").kendoChart({ dataSource: { transport: { read: { dataType: "json", url: "/home/getData" } } }, title: { text: "Break-up of Spain Electricity Production for 2008" }, legend: { position: "bottom" }, series: [{ type: "pie", field: "percentage", categoryField: "source", explodeField: "explode" }], seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"], tooltip: { visible: true, template: "${ category } - ${ value }%" } }); } $(document).ready(createChart); $(document).bind("kendo:skinChange", createChart); </script>and this is the function which return the jsonpublic ActionResult getData() { var data = "[{ 'source': 'Hydro','percentage': 22,'explode': true},{'source':'Solar','percentage':2,'explode': false},{'source':'Nuclear','percentage': 49,'explode': false},{'source':'Wind','percentage': 27,'explode': false}]"; //return data; return this.Content(data, "application/json"); 解决方案 ("#chart").kendoChart({ dataSource: { transport: { read: { dataType: "json", url: "/home/getData" } } }, title: { text: "Break-up of Spain Electricity Production for 2008" }, legend: { position: "bottom" }, series: [{ type: "pie", field: "percentage", categoryField: "source", explodeField: "explode" }], seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"], tooltip: { visible: true, template: "{ category } -{ value }%" } }); } 这篇关于KendoUI图表数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！