无法让Kendo自己的样本使用远程代码

时间:2013-05-08 23:39:27

标签: binding charts kendo-ui

我是剑道新手,只是试探它。我正在查看演示中提供的折线图示例上的组绑定。我在演示中链接了远程json但无法使图表工作。如果我导航到json链接,json显示正常。任何帮助将不胜感激。

演示链接:http://demos.kendoui.com/dataviz/line-charts/remote-data.html

链接到我的代码:http://jsfiddle.net/Grjsn/3/

代码文字:

<div id="example" class="k-content absConf">
     <div class="chart-wrapper" style="margin: auto;">
      <div id="chart"></div>
</div>

<script>
function createChart() {
                    $("#chart").kendoChart({
                        dataSource: {
                            transport: {
                                read: {
                                    url: "http://demos.kendoui.com/content/dataviz/js/spain-electricity.json",
                                    dataType: "json"
                                }
                            },
                            sort: {
                                field: "year",
                                dir: "asc"
                            }
                        },
                        title: {
                            text: "Spain electricity production (GWh)"
                        },
                        legend: {
                            position: "top"
                        },
                        seriesDefaults: {
                            type: "line"
                        },
                        series:
                        [{
                            field: "nuclear",
                            name: "Nuclear"
                        }, {
                            field: "hydro",
                            name: "Hydro"
                        }, {
                            field: "wind",
                            name: "Wind"
                        }],
                        categoryAxis: {
                            field: "year",
                            labels: {
                                rotation: -90
                            }
                        },
                        valueAxis: {
                            labels: {
                                format: "N0"
                            },
                            majorUnit: 10000
                        },
                        tooltip: {
                            visible: true,
                            format: "N0"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });
</script>

1 个答案:

答案 0 :(得分:1)

加载JSON会引发错误:

  

XMLHttpRequest无法加载http://demos.kendoui.com/content/dataviz/js/spain-electricity.json。 Access-Control-Allow-Origin不允许原点http://fiddle.jshell.net

这是因为浏览器中AJAX请求的同源安全性。

http://en.wikipedia.org/wiki/Same_origin_policy