#jquery #ajax #kendo-ui #kendo-grid #kendo-asp.net-mvc
Вопрос:
Я пытаюсь привязать данные к компоненту donut kendo. до сих пор моя работа находится ниже
файл js :-
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: "/ert.mvc/Summary?id=23",
dataType: "json",
type: "GET"
}
}
},
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
series: [{
data: [{
type: "donut",
field: "newlyRequested",
categoryField: "source",
explodeField: "explode" },
{
type: "donut",
field: "pending",
categoryField: "source",
explodeField: "explode"
}]
}],
seriesColors: ["#42a7ff", "#666666"],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
Мой ответ api, как :-
{
total: 120,
pending: 25,
incomplete: 10,
newlyRequested: 10
}
Я последовал за ним https://demos.telerik.com/kendo-ui/donut-charts/donut-labels пример.
но я получаю kendo.all.js:7786 Неперехваченная ошибка типа: e.срез не является ошибкой функции .
мой ожидаемый результат-я хочу показать диаграмму пончиков с незавершенным ,незавершенным… в процентах от общего числа .
любая идея, пожалуйста
Ответ №1:
Во-первых, ваш ответ API неверен. Это должен быть массив объектов, подобных этому:
[
{type: "total", value: 120},
{type: "pending", value: 25},
{type: "incomplete", value: 10},
{type: "newlyRequested", value: 10}
]
Основываясь на приведенном выше ответе API, вам придется изменить свою series
конфигурацию. В конце концов, конфигурация вашей диаграммы пончиков должна быть примерно такой, как показано ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
dataSource: [
{type: "total", value: 120},
{type: "pending", value: 25},
{type: "incomplete", value: 10},
{type: "newlyRequested", value: 10}
],
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
series: [{
type: "donut",
field: "value",
categoryField: "type",
}],
seriesColors: ["#42a7ff", "#666666"],
tooltip: {
visible: true,
template: "#= category # (#= kendo.format('{0:P}', percentage) #): #= value #"
},
seriesDefaults: {
labels: {
template: "#= category # - #= kendo.format('{0:P}', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
});
</script>
</body>
</html>
Я добавил метку серии и изменил всплывающую подсказку, чтобы диаграмма выглядела лучше. Возможно, вы захотите взглянуть на другие примеры диаграмм здесь.