KendoUI图表数据源 [英] KendoUI Chart data source

问题描述

我有这个代码来绘制剑道饼图...它是从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}]; 
  //  返回数据;  
 
 
 < span class =code-keyword> return   this  .Content（data， < span class =code-string> 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 json

public 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图表数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！