使用 kendoChart 显示数据

Question

我想知道为什么我不能使用 kendoChart 显示我的结果查询。当我尝试这个时

series: [{
   type: "pie",
   data: [{
      category: "Available",
      value: 24
   }]
}],

有效！

但是当我尝试输入我的查询结果时（请看下图）

series: [{
   type: "pie",
   data: [{
      category: status,
      value: counts
   }]
}],

无记录显示

我当前的代码：

<script>
  const createChart = async () =>{
     const { status, counts } = await getConditions();
     console.log(status, counts)
     $("#chart1").kendoChart({
            title: {
                text: "All Books"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                labels: {
                    template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                    position: "outsideEnd",
                    visible: true,
                    background: "transparent"
                }
            },
          series: [{
                type: "pie",
                data: [{
                    category: status,
                    value: counts
                }]
            }],
            tooltip: {
                visible: true,
                template: "#= category # - #= kendo.format('{0:P}', percentage) #"
            }
        }); 
}
$(document).ready(()=>{
    createChart();
});
</script>

结果数据来自 console.log（状态，计数）

Answer 1

由于 status 和 counts 是数组，您需要将其转换为对象数组（具有 category 和 value 字段）Kendo 可以理解。请参阅下面的示例并在 Telerik DOJO 中尝试。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/pie-charts/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" />

    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="chart1">
    </div>
    <script>
  const createChart = async () =>{
     //const { status, counts } = await getConditions();
     //console.log(status, counts)
     // better ensure that status and counts are of the same length!
     let status = ["Not Available",
                   "Not Available",
                   "Not Available",
                   "Not Available",
                   "Available",
                   "Available",
                   "Available"];
     let counts = [7,
                   7,
                   7,
                   7,
                   7,
                   7,
                   7];
     let data = [];
     for (let a = 0; a < status.length; a++) {
       data.push({
         category: status[a],
         value: counts[a]
       });
     }
     $("#chart1").kendoChart({
            title: {
                text: "All Books"
            },
            legend: {
                position: "top"
            },
            seriesDefaults: {
                labels: {
                    template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                    position: "outsideEnd",
                    visible: true,
                    background: "transparent"
                }
            },
          series: [{
                type: "pie",
                data: data,
            }],
            tooltip: {
                visible: true,
                template: "#= category # - #= kendo.format('{0:P}', percentage) #"
            }
        }); 
}
$(document).ready(()=>{
    createChart();
});
</script>
</div>

</body>
</html>

使用 kendoChart 显示数据

Display data using kendoChart

javascript

jquery

kendo-ui