使用kendoChart显示数据

发布于 2025-01-17 07:04:06 字数 1586 浏览 2 评论 0原文

我想知道为什么我无法使用 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(status, counts) 中的结果数据

原文

I wonder why I cant display my result query using the kendoChart. when i tried this

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

It works!

but when i tried to put the result of my query (please see the picture below)

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

no record display

my current code:

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

the results data from the console.log(status, counts)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

美煞众生 2025-01-24 07:04:06

由于 status 和 counts 是数组，因此您需要将其转换为对象数组（带有 category 和 value fields) 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>

As status and counts are arrays, you'll need to convert it to an array of objects (with category and value fields) Kendo can understand. See example below and try it in the 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>

回复收藏 0 原文

~没有更多了~