Блог

Главная - Вопросы по программированию - Как привязать данные к компоненту donut kendo

Как привязать данные к компоненту donut kendo

#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>

Я добавил метку серии и изменил всплывающую подсказку, чтобы диаграмма выглядела лучше. Возможно, вы захотите взглянуть на другие примеры диаграмм здесь.

Метки: