如何在kendo中绑定线图与动态数据源 [英] How to bind line graph in kendo with dynamic data source
问题描述
大家好，
我试图用这段代码实现kendo折线图。
function createChart（）{
$（ #chart）。kendoChart（{
dataSource：{
transport：{
read：{
/ / url：/ Test / test.json，
url： / Employees / GetJsonData，
dataType： json
}
}，
排序：{
字段： 年，
dir： asc
}
}，
title： {
text： 员工跟踪记录
}，
图例：{
位置： top
}，
seriesDefaults：{
type： line
}，
系列：[{
字段： value，
name： Value
}]，
categoryAxis：{
field：< span class = code-string> 周，
标签：{
轮换：-90
}，
十字准线：{
visible： true
}
}，
valueAxis：{
labels ：{
格式： N0
}，
majorUnit ： 10000
}，
工具提示：{
visible： true ，
共享： true ，
格式： N0
}
}）;
}
$（ document ）。ready（createChart）;
$（ document ）。bind（ kendo：skinChange，createChart）;
这里的问题是我在Employee Controller中的方法GetJsonData没有返回数据，因此没有加载图表。我从控制器部分获取数据的方法是：
public string GetJsonResult（[DataSourceRequest] Kendo.Mvc.UI.DataSourceRequest request）
{
// 这里的其他一些函数和操作来获取如下所示的jsonString
string jsonString = [{\week \：\W1 \\ \\，\value \：3000}，{\week \：\W2 \，\value \：4000}，{\week \ ：\W3 \，\value \：2500}];
return jsonString;
}
因为，我需要操纵json，我刚刚在这里写了jsonString是我要发送给jquery数据源的字符串。但是数据源不会接受它。
假设我把它写到json文件并从那里读取然后json哪里好在另一方面会被硬编码。
所以有人可以帮我解决这个问题。
谢谢
我的尝试：
这是我在json文件中写的
[
{
周：W1，
价值：3000
}，
{
周：W2，
价值：4000
}，
{
周：W3，
价值：2500
}
]
（ ＃chart）。 kendoChart（{
dataSource：{
transport：{
read：{
// url：/ Test / test.json，
url： / Employees / GetJsonData，
dataType： json
}
}，
sort：{
field： year，
dir： asc
}
}，
title：{
text： 员工跟踪记录
}，
legend：{
position： top
}，
seriesDefaults：{
type： 行
}，
系列：[{
字段： value，
name： Value
}]，
categoryAxis：{
field： week，
标签：{
轮换：-90
}，
十字准线：{
visible： true
}
}，
valueAxis：{
labels：{
form at： N0
}，
majorUnit： 10000
}，
工具提示：{
visible： true ，
分享： true ，
格式： N0
}
}）;
}
（ document ）。ready（createChart）;
（ document ）。bind（ kendo：skinChange，createChart）;
这里的问题是我的Employee Controller中的方法GetJsonData没有返回数据，因此没有加载图表。我从控制器部分获取数据的方法是：
public string GetJsonResult（[DataSourceRequest] Kendo.Mvc.UI.DataSourceRequest request）
{
// 这里的其他一些函数和操作来获取如下所示的jsonString
string jsonString = [{\week \：\W1 \\ \\，\value \：3000}，{\week \：\W2 \，\value \：4000}，{\week \ ：\W3 \，\value \：2500}];
return jsonString;
}
因为，我需要操纵json，我刚刚在这里写了jsonString是我要发送给jquery数据源的字符串。但是数据源不会接受它。
假设我把它写到json文件并从那里读取然后json哪里好在另一方面会被硬编码。
所以有人可以帮我解决这个问题。
谢谢
我的尝试：
这是我在json文件中写的
[
{
周：W1，
价值：3000
}，
{
周：W2，
价值：4000
}，
{
周：W3，
价值：2500
}
]
Hi Guys,
I was trying to implement kendo line chart with this piece of code.
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
//url: "/Test/test.json",
url:"/Employees/GetJsonData",
dataType: "json"
}
},
sort: {
field: "year",
dir: "asc"
}
},
title: {
text: "Employee Track Record"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line"
},
series: [{
field: "value",
name: "Value"
}],
categoryAxis: {
field: "week",
labels: {
rotation: -90
},
crosshair: {
visible: true
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: true,
shared: true,
format: "N0"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Here, the issue is that my method GetJsonData in Employee Controller is not returning data so that the chart is not being loaded. What I am doing to get data from the controller part is :
public string GetJsonResult([DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request)
{
//some other function here and manipulate to get jsonString like below
string jsonString = "[{\"week\": \"W1\",\"value\": 3000 },{\"week\": \"W2\",\"value\": 4000},{\"week\": \"W3\",\"value\": 2500}]";
return jsonString;
}
Since, i need to manipulate json, i just wrote here jsonString which is the string that I would send to jquery datasource. But the datasource wont accept it.
Suppose i write it to json file and read from there then it would be fine where json would be hardcoded on the other way.
So can someone help me out with this one urgently please.
Thanks
What I have tried:
this is what i wrote in json file
[
{
"week": "W1",
"value": 3000
},
{
"week": "W2",
"value": 4000
},
{
"week": "W3",
"value": 2500
}
]
("#chart").kendoChart({ dataSource: { transport: { read: { //url: "/Test/test.json", url:"/Employees/GetJsonData", dataType: "json" } }, sort: { field: "year", dir: "asc" } }, title: { text: "Employee Track Record" }, legend: { position: "top" }, seriesDefaults: { type: "line" }, series: [{ field: "value", name: "Value" }], categoryAxis: { field: "week", labels: { rotation: -90 }, crosshair: { visible: true } }, valueAxis: { labels: { format: "N0" }, majorUnit: 10000 }, tooltip: { visible: true, shared: true, format: "N0" } }); }
(document).ready(createChart);
(document).bind("kendo:skinChange", createChart);
Here, the issue is that my method GetJsonData in Employee Controller is not returning data so that the chart is not being loaded. What I am doing to get data from the controller part is :
public string GetJsonResult([DataSourceRequest]Kendo.Mvc.UI.DataSourceRequest request) { //some other function here and manipulate to get jsonString like below string jsonString = "[{\"week\": \"W1\",\"value\": 3000 },{\"week\": \"W2\",\"value\": 4000},{\"week\": \"W3\",\"value\": 2500}]"; return jsonString; }
Since, i need to manipulate json, i just wrote here jsonString which is the string that I would send to jquery datasource. But the datasource wont accept it.
Suppose i write it to json file and read from there then it would be fine where json would be hardcoded on the other way.
So can someone help me out with this one urgently please.
Thanks
What I have tried:
this is what i wrote in json file
[
{
"week": "W1",
"value": 3000
},
{
"week": "W2",
"value": 4000
},
{
"week": "W3",
"value": 2500
}
]
这篇关于如何在kendo中绑定线图与动态数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
