Question

我正在尝试将我的wcf服务的结果绑定到kendo移动应用程序中的子弹图。它没有给我任何结果，模拟器也没有错误。这是telerik kendo ui演示的一个例子。我在wcf服务中使用了这个例子。服务没有问题。它产生了完美的输出。但我仍然没有在图表中得到最终结果。那么有人可以告诉我，我在这里做错了什么。

Here is the code,

 <!DOCTYPE html>
        <html>
        <head>
        <base href="http://demos.telerik.com/kendo-ui/bullet-charts/index">
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
        <script src="http://cdn.kendostatic.com/2014.2.716/js/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/angular.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
    </head>
    <body>
        <div id="example">
        <div class="demo-section k-content">
            <table class="history">
                <tr>
                    <td class="item">Chart1</td>
                    <td class="chart"><div id="chart-mmHg" style="width: 485px"></div></td>
                </tr>

            </table>

        </div>

        <script>

            function createChart() {
                $("#chart-mmHg").kendoChart({
                    legend: {
                        visible: false
                    },
                    dataSource: {
                        transport: {
                            read: {
                                url: "http://localhost:29067/Service1.svc/Mymethodname",
                                dataType: "json"
                            }
                        }
                    },
                    series: [{
                        type: "bullet",
                        currentField: "current",
                        targetField: "target",
                        target: {
                            color: "#aaaaaa"
                        }
                    }],
                    chartArea: {
                        margin: {
                            left: 0
                        }
                    },
                    categoryAxis: {
                        majorGridLines: {
                            visible: false
                        },
                        majorTicks: {
                            visible: false
                        }
                    },
                    valueAxis: [{
                        plotBands: [{
                            from: 0, to: 17500, color: "#ccc1df", opacity: .6
                        }, {
                            from: 17500, to: 18000, color: "#1rf036", opacity: .3
                        }],
                        majorGridLines: {
                            visible: false
                        },
                        min: 0,
                        max: 18000,
                        minorTicks: {
                            visible: true
                        }
                    }],
                    tooltip: {
                        visible: true,
                        template: "Maximum: #= value.target # <br /> Average: #= value.current #"
                    }
                });

            }

            $(document).ready(createChart);
            $(document).bind("kendo:skinChange", createChart);
        </script>
        <style scoped>
            .history {
                border-collapse: collapse;
                width: 60%;
                margin: 0 auto;
            }

            .history .k-chart {
                height: 65px;            
            }

            .history td.item {
                line-height: 65px;
                width: 20px;
                text-align: right;
                padding-bottom: 22px;
            }
        </style>
    </div>
    </body>
    </html>

Kendochart数据绑定无法正常工作

0 个答案: