为什么我的剑道图没有被渲染?

时间:2015-01-11 21:46:53

标签: kendo-ui kendo-asp.net-mvc kendo-dataviz

我已经决定在某些情况下与剑道一起提供的MVC包装器过于严格且难以遵循。 Telerik增加了调用Javascript函数来计算图表上某点颜色的功能。但是我找不到任何MVC语法的例子

所以我决定使用包装器来帮助生成我的javascript并在我的cshtml文件中使用它

但是,当我这样做时,我的图表没有呈现?

<div id="chartContainer" class="chartContainer">

    <script>
        function CreateChart() {
            $("#kendoChart").kendoChart({
                "chartArea": {
                    "border": {
                        "width": 1,
                        "dashType": "solid",
                        "color": "#cdcdcd"
                    }
                },
                "plotArea": {
                    "margin": {
                        "top": 0,
                        "right": 0,
                        "bottom": 0,
                        "left": 0
                    }
                },
                "legend": {
                    "visible": false
                },
                "series": [{
                    "name": "Consumption",
                    "type": "column",
                    "field": "Consumption",
                    "categoryField": "PeriodDateTime"
                }],
                "categoryAxis": [{
                    "labels": {
                        "format": "dd/MM/yy",
                        "rotation": -90,
                        "step": 48
                    },
                    "majorGridLines": {
                        "visible": false
                    },
                    "type": "date",
                    "baseUnit": "minutes",
                    "baseUnitStep": 30
                }],
                "valueAxis": [{
                    "labels": {
                        "format": "{0:N0}"
                    },
                    "line": {
                        "visible": false
                    },
                    "title": {
                        "text": "Consumption kWh"
                    }
                }],
                "transitions": false,
                "seriesColors": ["green"],
                "tooltip": {
                    "format": "{0:N0}",
                    "visible": true
                },
                "autoBind": false
            });
        }

        CreateChart();
    </script>


</div>

然而,这不会呈现?

我也试过从document.ready调用CreateChart但是没有运气

请参阅下面的屏幕截图screenshot

我还试图找到包含div并调用appendChild,但是我收到一条错误,说明没有方法appendChild?

有谁知道我做错了什么?这一定是愚蠢的事情,但我看不到它!

1 个答案:

答案 0 :(得分:0)

您的图表构造对象中没有dataSource。你必须指定它:

$("#chart").kendoChart({
    dataSource: {
         data: [
            { price: 10 },
            { price: 20 }
        ]
    }
    ...
});

或明确输入系列:

$("#chart").kendoChart({
    series: [{
        name: "India",
        data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    },{
        name: "World",
        data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
    }],
    ...
});

您可以在此处找到有关图表数据源的更多信息:http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-dataSource